状态树设计

状态组织

数据流

Redux应用中数据的生命周期遵循下面4个步骤：

使用 store.dispatch(action) 分发消息

action就是一个描述发生了什么的普通对象。比如：

{ type: 'LIKE_ARTICLE', articleId: 42 };
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Megan' } };
{ type: 'ADD_TODO', text: 'Read the Redux docs.'};

可以把action理解成新闻的摘要。如 “玛丽喜欢42号文章。” 或者 “任务列表里添加了’学习Redux文档’”。你可以在任何地方调用 store.dispatch(action)，包括组件中、XHR回调中、甚至定时器中。

Redux store调用传入的reducer函数

Store会把两个参数传入reducer当前的state树和action。例如，在这个todo应用中，根reducer可能接收这样的数据：

// 当前应用的 state(todos 列表和选中的过滤器)
let previousState = {
  visibleTodoFilter: "SHOW_ALL",
  todos: [
    {
      text: "Read the docs.",
      complete: false,
    },
  ],
};

// 将要执行的 action(添加一个 todo)
let action = {
  type: "ADD_TODO",
  text: "Understand the flow.",
};

// render 返回处理后的应用状态
let nextState = todoApp(previousState, action);

注意reducer是纯函数。它仅仅用于计算下一个state。它应该是完全可预测的：多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作，如API调用或路由跳转。这些应该在dispatch action前发生。

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

根reducer的结构完全由你决定。Redux原生提供 combineReducers() 辅助函数，来把根reducer拆分成多个函数，用于分别处理state树的一个分支。

下面演示 combineReducers() 如何使用。假如你有一个todos列表，使用当前的选择过滤器来追踪两个reducers(原文：and the currently selected filter setting to keep track of with two reducers)：

function todos(state = [], action) {
  // 省略处理逻辑...
  return nextState;
}

function visibleTodoFilter(state = "SHOW_ALL", action) {
  // 省略处理逻辑...
  return nextState;
}

let todoApp = combineReducers({
  todos,
  visibleTodoFilter,
});

当你触发action后，combineReducers 返回的 todoApp 会负责调用两个reducer：

let nextTodos = todos(state.todos, action);
let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action);

然后会把两个结果集合并成一个state树：

return {
  todos: nextTodos,
  visibleTodoFilter: nextVisibleTodoFilter,
};

虽然 combineReducers() 是一个很方便的辅助工具，你也可以选择不用；你可以自行实现自己的根reducer！

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

这个新的树就是应用的下一个state所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前state。现在，可以应用新的state来更新UI。如果你使用了React Redux这类的绑定库，这时就应该调用 component.setState(newState) 来更新。

状态树设计

状态组织

数据流

Links