知识点整理 - Redux 介绍与基础

随着 JavaScript 单页应用开发日趋复杂,越来越多的 state (状态)需要在前端进行管理。

这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。

为了高效的管理 state 而不是简单的在全局上新建变量,开发者需要捋清 model/view 之间的关系,以降低前端开发的复杂性。此处以 Redux 为例,总结如何利用其设计思想以及实践经验,来使得应用的 state 管理变得容易。

核心概念

Redux 的核心概念第一点则是 state 的表示,你可以用一个对象来表示应用的 state (可以看成 model) 但不能直接修改他(没有 setter)。这一步定义的内容可以看成是用于控制页面效果、动画的一些开关状态。

1
2
3
4
{
todo: [],
name: 'me'
}

想要修改 state 中的数据只能通过发起 action 来实现(这样做的好处就是可以清晰的知道应用中到底发生了什么), action 也是一个普通对象,用来描述将要发生什么。在 action 中我们需要存储发生事件的描述以及用于更新 state 的属性数据,比如:

1
{ type: 'ADD_TODO', text: 'Go to swimming pool' }

那么如何接收 action 并更新返回新的 state 呢?用 reducer 函数。它接收 state 和 action,在内部处理后并返回新的 state。考虑到应用的复杂性,我们可以分别编写 reducer 分别独立地操作 state tree 的不同部分。

Redux 三大原则

  • 单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
  • State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers。

基础

Action

我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。除了 type 字段外,对象结构完全由自己决定。但是需要注意的是应该尽量减少在 action 中传递的数据。

为了了解生成 action,还需要知道 action 创建函数,该函数只是简单的返回一个 action,这样做将使 action 创建函数更容易被移植和测试。例如:

1
2
3
4
5
6
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

当你把 action 创建函数结果传给 dispatch() 方法,即可发起一次 dispatch 过程,例如:

1
dispatch(addTodo(text))

在使用过程中可能用到的工具包括 connect()bindActionCreators()

Reducer

reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。通过 reducer,我们不仅可以修改 state 还可以借机初始化 state。

针对 action 的处理我们需要注意:不要修改 state,且在 default 情况下返回旧的 state。

在使用过程中可能用到的工具包括 combineReducers()

Store

在知道了如何用 reducer 来根据 action 更新 state 后,需要进一步了解的就是 store —— 将它们联系到一起的对象。store 具有以下职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

数据流

Redux 应用中的数据的生命周期遵循四个步骤:

  • 调用 store.dispatch(action)
  • redux store 调用传入的 reducer 函数
  • 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
  • Redux store 保存了根 reducer 返回的完整 state 树

搭配 react

结合 react 开发其中比较重要的一点在于如何设计组件层次结构。结合 react 可以知道在组件层次方面,主要需要考虑两点:展示组件和容器组件,当然不好区分的组件可以划分为其他组件。