原文地址:Leveling Up with React: Redux
Redux 是一个用于 JavaScript 应用,管理数据流(data-state)和 UI 状态(UI-state)的工具。它对于单页面应用来说是非常理想的,尤其是随着时间推移,state 会变得越来越复杂。同样它也是不依赖于框架的(framework-agnostic),因此虽然 Redux 是用 React 写的,但是它也可以用于 Angular 或 jQuery 应用。
另外,它来自一个“时间之旅”的实验,事实上,我们稍后将了解它。
正如我们之前的教程 React "flows" data through components ,具体来说,这叫“单向数据流”,数据流向一个方向——从父到子。因为这个特征,两个非父子关系的组件是如何通信却不是很清楚。
React 并没有介绍组件与组件的直接通信的方法。甚至它没有知识这个特性的方法,通过很多人实验这是欠考虑的,因为组件与组件的直接通信是错误的并且或导致意大利面条式代码——一个关于代码很难去跟踪的古老的术语。
React 对此确实提供了方法,但是他们希望你自己通过工具去实现它,这里是 React docs 的片段:
对于两个组件之间的通信,你可以建立自己的全局事件系统,... Flux 模式是实现它的一种可行的办法。
这时,Redux 就及时出现了。Redux 提供了一个解决办法:把所有的应用状态存放在一个地方,叫做 “store” ,组件通过发起(dispatch)变更的 state 到 “store”,而不是直接将变更的 state 传递给组件。组件需要知道 state 的改变,可以从“store”中订阅(subscribe)。
这个 store 可以被理解为在应用中变化的 state 的“中间人”。引入 Redux,组件之间不需要直接通信,所有的状态变化都必须经过“真理的唯一来源”——store。
这与其他的策略——组件与组件直接通信不同,这种策略由于令人疑惑的原因导致错误。
有了 Redux, 就明白了:所有组件都从 store 获得他们的 state ,同时组件之间改变他们的 state 也是通过 store。要改变组件,需要通过向 store 发起,不需要担心其他组件是否需要改变 state。这就是 Redux 使数据流(data-flow)变得简单的原因。
如果有需要可以了解Flux pattern。
ps:第一次翻译技术类文章,想通过自己边学边译提高自己的水平,同时如果刚好也能帮助到你,那这篇文章也就是没白翻。欢迎交流指正。
未完待续: