Redux 介绍

Redux 介绍

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 (如果你需要一个 WordPress 框架,请查看 Redux Framework。)

可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览

Redux 除了和 React 一起用外,还支持其它界面库。 它体小精悍(只有 2kB,包括依赖)。

Redux 开发经历


Dan Abramov(Redux 作者)在他准备 React Europe 演讲热加载与时间旅行时开始开发 Redux。

他的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,因此才得以实现日志打印,热加载,时间旅行,同构应用,录制和重放,而不需要任何开发参与。

Redux 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。 不管你有没有使用过它们,只需几分钟就能上手 Redux。

Redux 动机


随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。 当系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。

如果这还不够糟糕,考虑一些来自前端开发领域的新需求,如更新调优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性,难道就这么放弃了吗?当然不是。

这里的复杂性很大程度上来自于:我们总是将两个难以理清的概念混淆在一起:变化和异步。 我称它们为曼妥思和可乐。如果把二者分开,能做的很好,但混到一起,就变得一团糟。一些库如 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是,React 依旧把处理 state 中数据的问题留给了你。Redux 就是为了帮你解决这个问题。

跟随 FluxCQRS 和 Event Sourcing 的脚步,通过限制更新发生的时间和方式,Redux 试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。

Redux 特性

行为可预测

Redux 能够帮助你编写 行为一致、能在不同环境 (客户端、服务器端和原生程序)中运行、且易于测试的应用程序。

集中管理

将应用程序的状态和逻辑集中管理可实现强大 的功能,例如 撤销/重做、 状态持久化等等。

可调式

Redux DevTools 帮你轻松地跟踪 应用程序的状态在何时、何地以及如何改变了。Redux 的架构让你可以记录更改,使用 "time-travel debugging" 甚至可以将完整的错误报告发送到 服务器。

灵活

Redux 可与任何 UI 层一起使用,并且有 庞大的插件生态 满足你的需求。

如何学习 Redux

我们会为你提供一系列广泛的资源。无论你基础如何,学习方式如何,这些资料都会帮助你学习 Redux。

Redux 基础概念

如果你刚刚开始学习 Redux,想要了解一些基础概念,请看:

Redux 进阶概念

当你了解了 action、reducer、store 的基本使用方法之后,你也许会在其他一些方面遇到问题,比如异步逻辑和 AJAX 请求、连接到 React 等 UI 库、用 Redux 建立一个应用等等:

  • Redux 高级部分:包括异步逻辑、middleware、路由。

  • Redux 学习资源 中推荐了一些文章,覆盖了 Redux 很多方面。

  • Sophie DeBenedetto 的 8 个章节的 Building a Simple CRUD App with React + Redux 教程,展示了如何从零开始建立一个 CURD(增删改查)应用。

开始学习 Redux 

Redux 是负责组织 state 的工具,但你也要考虑它是否适合你的情况。不要因为有人告诉你要用 Redux 就去用,花点时间好好想想使用了 Redux 会带来的好处或坏处。

在下面的场景中,引入 Redux 是比较明智的:

  • 你有着相当大量的、随时间变化的数据

  • 你的 state 需要有一个单一可靠数据来源

  • 你觉得把所有 state 放在最顶层组件中已经无法满足需要了

的确,这些场景很主观笼统。因为对于何时应该引入 Redux 这个问题,对于每个使用者和每个应用来说都是不同的。

对于 Redux 应该如何、何时使用的更多建议,请看: