Flux&Redux

Flux

1. 解决传统MVC设计模式数据流动混乱问题，来源于Facebook。
2. 在Flux中，数据是单向流动的

Flux is a pattern for managing data flow in your application. The most important concept is that data flows in one direction.

3. 设计模式

   
   
   Flux

• Dispatcher

he dispatcher receives actions and dispatches them to stores that have registered with the dispatcher.Every store will receive every action.There should be only one singleton dispatcher in each application.

• Store

A store is what holds the data of an application. Stores will register with the application's dispatcher so that they can receive actions. The data in a store must only be mutated by responding to an action. There should not be any public setters on a store, only getters. Stores decide what actions they want to respond to. Every time a store's data changes it must emit a "change" event. There should be many stores in each application.

• Action

Actions define the internal API of your application. They capture the ways in which anything might interact with your application. They are simple objects that have a "type" field and some data.
Actions should be semantic and descriptive of the action taking place. They should not describe implementation details of that action. Use "delete-user" rather than breaking it up into "delete-user-id", "clear-user-data", "refresh-credentials" (or however the process works). Remember that all stores will receive the action and can know they need to clear the data or refresh credentials by handling the same "delete-user" action.

• Views

Data from stores is displayed in views. Views can use whatever framework you want (In most examples here we will use React). When a view uses data from a store it must also subscribe to change events from that store. Then when the store emits a change the view can get the new data and re-render. If a component ever uses a store and does not subscribe to it then there is likely a subtle bug waiting to be found. Actions are typically dispatched from views as the user interacts with parts of the application's interface.

• data flow
  1. Views send actions to the dispatcher.
  2. The dispatcher sends actions to every store.
  3. Stores send data to the views.

Redux

1. Redux是flux思想在react中的实现
   • The whole state of your app is stored in an object tree inside a single store.
   • The only way to change the state tree is to emit an action, an object describing what happened.
   • To specify how the actions transform the state tree, you write pure reducers.

The shape of the state is up to you: it can be a primitive, an array, an object,.or even an Immutable.js data structure. The only important part is that you should not mutate the state object, but return a new object if the state changes.

2. 使用
   • npm install redux -S
   • 定义一个reducer，处理数据

   function counter(state = 0, action) {
     switch (action.type) {
       case 'INCREMENT':
         return state + 1
       case 'DECREMENT':
         return state - 1
       default:
         return state
     }
   }
   

   • 创建一个store，传入reducer
let store = Redux.createStore(counter)
   • store分发action

     store.dispatch({ type: 'INCREMENT' })
     store.dispatch({ type: 'INCREMENT' })
     store.dispatch({ type: 'DECREMENT' })
     

   • store订阅一个VM的方法，当数据发生改变时，会执行这个方法，通常这部分使用react

     store.subscribe(() => {
         document.getElementById("app").innerHTML = store.getState.count;
     })