Redux 学习笔记

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

• action 是纯声明式的数据结构，只提供事件的所有要素，不提供逻辑。
• reducer 是一个匹配函数，action 的发送是全局的：所有的 reducer 都可以捕捉到并匹配与自己相关与否，相关则拿走 action 中的要素进行逻辑处理，修改 store 中的状态，不相关则不对 state 进行处理并原样返回。
• store 负责存储状态并可以被 react api 回调，发布 action。

要点：

1. 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
2. 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。

即：不直接修改 state，编写专门的函数来决定每个 action 如何改变应用的 state，这个函数被叫做 reducer。

Action

是把数据从应用传到 store 的有效载荷。是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。

const action = {
  type: 'ADD_TODO',  // 一定有 type 字段
  payload: 'Learn Redux'
};

Reducer

(previousState, action) => {newState 的纯函数}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}
//注意点：
//1\. 不要修改 state 值。如果符合条件，则新建一个副本返回（第一个参数为{}而不是 state）;
//2\. 在 default 情况下返回旧的 state。

Store（单一）

1. 维持应用的 state；

2. 提供 getState() 方法获取 state；

3. 提供 dispatch(action) 方法更新 state；

4. 通过 subscribe(listener) 注册监听器;

5. 通过unsubscribe(listener) 返回的函数注销监听器。

import { createStore } from 'redux';
import todoApp from './reducers';
let store = createStore(todoApp); //第二个参数可选，设置 state 的初始状态
combineReducers({ counter: counter, todos: todos}); //将两个reducer 合并在一起

数据流

1. 调用store.dispatch(action)。

2. Redux store 调用传入的 reducer 函数。

3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。

4. Redux store 保存了根 reducer 返回的完整 state 树。

流程.png

参考文档：http://cn.redux.js.org/index.html