Redux 数据流
严格的单向数据流是 R 架构的设计核心。
这意味着应用中所有的数据都遵循相同的生命周期,这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化,这样可以避免使用多个且独立的无法相互引用的重复数据。
如果这些理由还不足以令你信服,读一下 动机 和 ,这里面有更加详细的单向数据流优势分析。虽然 R 并不是严格意义上的 Flux,但它们有共同的设计思想。
R 应用中数据的生命周期遵循下面 4 个步骤:
Action 就是描述“发生了什么”的普通对象。比如:
{ type: 'LIKE_ARTICLE', articleId: 42 } { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } } { type: 'ADD_TODO', text: 'Read the R docs.' }
可以把 action 理解成新闻的。如 “玛丽喜欢42号。” 或者 “任务列表里了'学习 R 文档'”。
你可以在任何地方 store.dispatch(action),组件中、XHR 回调中、甚至定时器中。
Store 会把两个参数传入 reducer: 当前的 state 树和 action。
例如,个 todo 应用中,根 reducer 可能接收这样的数据:
// 当前应用的 state(todos 列表和选中的过滤器) let prevsState = { visibleTodoFilter: 'SHOW_ALL', todos: [ { text: 'Read the docs.', complete: false } ] } // 将要执行的 action( todo) let action = { type: 'ADD_TODO', text: 'Understand the flow.' } // reducer 返回处理后的应用状态 let nextState = todoApp(prevsState, action)
注意 reducer 是纯。它仅仅用于计算下 state。它应该是完全可预测的:多次传入相同的输入必须产生相同的。它不应做有副作用的操作,如 API 或路由。这些应该在 dispatch action 前发生。
根 reducer 的结构完全由你决定。R 原生提供combineReducers()辅助,来把根 reducer 拆分成多个,用于分别处理 state 树的分支。
下面演示 combineReducers() 如何使用。假如你有两个 reducer:是 todo 列表,另是当前选择的过滤器设置:
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!
这个新的树就是应用的下 state!所有 store.subscribe(listener) 的监听器都将被;监听器里可以 store.getState() 获得当前 state。
现在,可以应用新的 state 来更新 UI。如果你使用了 这类的绑定库,这时就应该 component.setState(newState) 来更新。
接下来
现在你已经理解了R如何工作,是时候结合React开发应用了。
如果你已经熟悉了基础概念且完成了这个教程,可以学习高级教程中的异步数据流,你将学到如何使用 middleware 在 异步 action 到达 reducer 前处理它们。