React & Redux 入门教程 - 第三篇:Redux 术语浅析

本文是《React & Redux 入门教程》系列文章的第三篇。在 React & Redux 入门教程 - 第一篇:React 术语浅析 中,我们学习了 React 的术语。在 React & Redux 入门教程 - 第二篇:从 jQuery 到 React 中,我们将一个传统的基于 jQuery 的项目迁移到了 React。接下来我们要学习 Redux 了。我们还是从术语开始学起。

这一篇主要分析各种 Redux 术语,参考来自技术官网的资料,夹杂了我的个人体会和理解。通过阅读这篇文章,读者可以全面掌握各种核心 Redux 术语。在听别人讨论相关技术问题的时候,能够及时进入语境,理解别人谈话的内容,不再如闻天书、不知所云。

Redux

Redux 在 GitHub 上面有两万多颗星,是最流行的 Flux 实现。 很多人认为,一旦 React 程序变复杂,就要引入 Redux。GitHub 上面很多 React 的项目同时也使用了 Redux。

Redux is a predictable state container for JavaScript apps.

Redux 本质上是 JS 程序中 state 的容器。它通过加入一些限制,使得 state 的修改可预测,可以帮助你写出在不同环境下行为高度一致的程序。

值得一提的是,Redux 和 React 并没有非常直接的关系,React 可以没有 Redux,Redux 也可以和 React 之外的其它 View 框架搭配使用。

State

State 可以是任意类型。但一般情况下,是一个对象,或者是一个 key-value 数据结构。在设计 state 数据类型和数据结构的时候,要确保它能够被序列化为 json。

State 代表了整个 Redux 程序的状态,它被 store 管理,并且是全局唯一的。

注意这里讲的是 Redux 的 state,不要和 React 的 state 搞混了。关于二者的区别与联系,我们摘录来自 Redux 作者的一段话:

Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

简单讲:React 的 state 是局部的或临时的,不会有复杂的变化;Redux 的 state 是全局的,可能会有复杂的变化。

Sometimes you’ll want to move from Redux state to React state (when storing something in Redux gets awkward) or the other way around (when more components need to have access to some state that used to be local).

根据具体情况,可能需要把数据在 React state 和 Redux state 之前做移动。有些开发者认为,有了 Redux 来管理 state,React 的 component 不应该再有自己 state,很显然这种看法是比较偏激的,不符合上述来自 Redux 作者的建议。

Action

Action 是一个对象类型,它必须有一个叫做 type 的字段,一般是 string 类型,其它字段则没有限制。

它表达了想要更改 state 的 intention,亦即它仅仅代表了想更改 state 的一个意愿,并非动作。通俗点讲,它描述的是,而非。初学者总会觉得 action 是一个函数,其实并不是,因为函数表达的是。这个术语确实有一定的迷惑性,请大家务必仔细体会下。

Reducer

Reducer 是一个 function,它接受 state 和 action 作为参数,返回一个新的 state。

Reducer 是 Redux 最重要的概念。它就是经典的 MapReduce 那个 reduce 的概念。也可以和 JavaScript 内置的 reduce 函数进行类比一下:

const result = [1,2,3,4].reduce((sum, item) => sum + item);

拿上述代码和 Redux 中 的 reducer 进行类比,state 就相当于 sum,action 就相当于 item

因为 reducer 必须是纯函数式的(没有副作用),所以 API call 不能放到里面。此外 reducer 接受的 state 是 immutable 的,不能修改它。如果想对它进行修改,只能创建一个新的 state。

Store

Store 是一个对象。一个 Redux app 只能有一个 store。Store 中保存了整个程序的 state。Store 有下面四个属性:

  1. dispatch(action)
  2. getState() getter方法,返回 state 对象。
  3. subscribe(listener) 监听者模式。注册监听者,当 state 发生改变的时候 listener callback 被调用。
  4. replaceReducer(nextReducer) 基本上用不到。它可以实现 hot reloading and code splitting。

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

− 6 = 2