Redux 的核心思想是 Web 应用是一个状态机,视图与状态是一一对应的。
最近一年的工作中都在使用 React 相关的技术栈,当初理解 Redux 也费了很大功夫,一直都想写一点关于 Redux 的教程,现在,终于开始了。
为什么使用 Redux#
Redux 的出现是为了解决 Javascript 中复杂的状态管理,当你的应用变得庞大,需要处理复杂的交互场景时,你可以尝试使用 Redux。如果你使用 React,如果你需要共享状态到很多组件中,如果你需要处理异步,如果一个组件的状态改变需要更新其他组件,你可能需要 Redux。
介绍#
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
Redux 专注于状态管理,和 react 解耦。
Redux 可以用这三个基本原则来描述:
- 单一状态树
整个应用的 state 被储存在一棵对象树中,并且这个对象树只存在于唯一一个 store 中。
- State 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
- 使用纯函数来执行修改
为了描述 action 如何改变 state 树,你需要编写 reducers。
Action#
Action 本质上是 JavaScript 普通对象。Redux 约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action。
Redux 中只需把 action 创建函数的结果传给 dispatch () 方法即可发起一次 dispatch 过程。
store 里能直接通过 store.dispatch () 调用 dispatch () 方法。
Reducer#
Reducers 根据传入的 action 和 state 计算新的 state。
Reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
只要传入参数相同,计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
- reducer 中不要修改 state,而是返回新对象。 可以使用 Object.assign () 新建一个副本。不能这样使用:
Object.assign(state, { visibilityFilter: action.filter })
上述代码会改变第一个参数的值。必须把第一个参数设置为空对象。也可以开启 ES7 使用对象展开运算符,从而使用 {...state, ...newState} 达到相同的目的。
3. 在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。
Store#
store 是维持应用 state 的容器,并在当你发起 action 的时候调用 reducer。
Store 就是把它们联系到一起的对象。Store 有以下职责:
- 维持应用的 state;
- 提供 getState () 方法获取 state;
- 提供 dispatch (action) 方法更新 state;
- 通过 subscribe (listener) 注册监听器;
- 通过 subscribe (listener) 返回的函数注销监听器。
Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 多个 reducer 组合而不是创建多个 store。
数据流#
Redux 应用中数据的生命周期遵循下面 4 个步骤:
- 调用 store.dispatch (action)。
你可以在任何地方调用 store.dispatch (action),包括组件中、XHR 回调中、甚至定时器中。
- Redux store 调用传入的 reducer 函数。
Store 会把两个参数传入 reducer: 当前的 state 树和 action。
-
根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
-
Redux store 保存了根 reducer 返回的完整 state 树。
总结#
本文只是一些关于 redux 的概念和基本介绍,下次会带来它的基本用法。