redux

redux

store
Store 是应用状态 state 的管理者，包含下列五个函数：

1. Store.getState() // 获取整个 state 树
2. Store.dispatch(action) // 触发 state 改变的state 进行监听
3. Store.subscribe(listener) // 可以理解为 DOM 中的 addEventListener
4. Store.replaceReducer(nextReducer) // 一般在 Webpack 按需加载时用到
5. unsubscribe

Store 与 state 的关系：
6. const store = createStore(reducer, initialState)
7. const state = store.getState()

Action

1.Action 就是包含 type 属性的普通对象，type 是实现用户行为追踪的关键

{
   type: 'Test',
   //看是get请求还是post请求
   payload: {
       id:123,
       completed: false
   }
}

2.Action Creator 就是创造 action 的函数，返回值是一个 action 对象。

function AddTest(text) {
  return {
      type: 'Test',
      payload: {
          id: 12,
          completed: false
      }
  };
}

3.通常，Action Creator 绑定到用户的操作（点击按钮等），根据参数不同，返回需要的 action。然后，通过 Store.dispatch(action) 改变 state，示例：

<AddTest onClick={text => dispatch(addTest(text))} />

Reducer

1.用户的每次 dispatch(action) 操作都会触发 Reducer 执行
2.Reducer 就是一个函数，根据 action.type 更新 state
3.最后，Reducer 返回最新的 state，完全替换原来的 state

function addTest(state = [], action) {
    switch (action.type) {
        case Test:
            return [
                ...state, {
                    text: action.text,
                    completed: false
                }
            ];
        default:
            return state;
    }
}

Redux 数据流

Action Creator(action)
=> Store.dispatch(action)
=> Reducer(state, action)
=> state = nextState