在 React 应用中，随着组件层次的不断加深，数据管理变得日益复杂。在传递数据的过程中，组件之间的耦合度很高，也很难维护。Redux 是一个使用 Flux 架构思想的开源 JavaScript 库，可用于管理应用程序中的所有状态。
Redux基本概念
Store
Redux中的 Store是一个纯Javascript对象，这个对象存储着整个应用的状态树（state），在应用中只有一个 Store。
Action
在 Redux 的世界里，Action 是触发状态变化的唯一来源。而 Action 也是一个纯Javascript对象，其中 action.type 是必须的。
Reducer
当 Store 接收到了 Action，Reducer 就会根据 Action 类型对应的逻辑来实现对 store 中的数据的改变。
如何使用 Redux
Redux 在 React 中的使用非常简单，只需要了解三个核心的 API 即可： createStore、combineReducers、applyMiddleware。我们以一个登录的例子，演示一下 Redux 如何在 React 中管理状态树的问题。
安装 Redux
我们可以通过 npm 命令安装 Redux。
--- ------- -----
创建 Store
我们先在React组件中，创建 store：
------ - ----------- - ---- -------- ----- ----- - ---------------------
createStore 接受一个 reducer 参数， reducer 是根据 action 来修改 state 的一个纯函数
编写 Reducer
我们创建 reducer 函数，根据接收到的 action 类型修改 state，提供新的 state
----- ------- - ------- ------- -- -
------ ------------- -
---- --------
------ -
---------
-------- ----
--
---- ---------
------ -
---------
-------- -----
--
--------
------ ------
-
--上面的代码中，我们定义了两个 action 类型，分别是 LOGIN 和 LOGOUT。
发送 Action
我们发送一个 action：
--------------------- ----------
获取 Store 数据
我们可以通过 subscribe 方法监听 state 变化，从而进行重新渲染。
------------------ -- -
----- ------- - -------------------------
----------------------- ---------
--Redux 可解决的问题
解除组件之间的状态共享
通过 Redux，我们把 store 中的数据存储在一个地方，不同的组件只需要 connect 到 store 里面的数据，就可以达到状态共享的效果。从而解除了组件之间状态共享的问题，使得组件之间的耦合度更低。
监听数据变化
在 store 中，我们可以通过监听数据变化的方法来重新渲染视图，不需要手动操作。
管理状态
Redux 可以方便地帮助我们管理 state，我们可以在开发过程中更好地管理复杂的应用程序状态。
Redux 的优势
统一管理状态树
在 Redux 中，我们可以方便地把状态树存储在一个地方，并统一管理，使得应用程序更加容易维护。
易于调试
Redux 的工作流程非常清晰，当应用程序出现问题时，我们可以很容易地监控每个 action 和 state 的变化，从而快速定位错误。
灵活的设计
Redux 允许我们根据不同的应用程序需求来设计 state，使得我们可以根据实际需要灵活地对 state 进行拆分和合并。
更好的可测试性
由于 Redux 对 state 和 action 的严格控制，我们可以更加轻松地进行单元测试。
结论
Redux 可以简单高效地管理应用的数据流，解决了 React 中组件之间状态共享和多层组件传递数据的问题。同时，Redux 的工作流程清晰，代码的可测试性更高，调试起来也更容易。使用 Redux 能够使得我们更加聚焦于通用组件和业务组件之间的区分，从而提升代码的复用性。
示例代码
------ ------ - --------- - ---- --------
------ - ----------- - ---- --------
----- ------- - ------- ------- -- -
------ ------------- -
---- --------
------ -
---------
-------- ----
--
---- ---------
------ -
---------
-------- -----
--
--------
------ ------
-
--
----- ----- - ---------------------
----- ----- ------- --------- -
------------------ -
-------------
-
------- -
--------------------- ----------
-
-------- -
--------------------- -----------
-
------------------- -
------------------ -- -
----- ------- - -------------------------
----------------------- ---------
--
-
-------- -
----- - ------- - - -----------
------ -
-----
-
------- -
---- ----------- -- ------------------------- -
---- ----------- -- ----------------------
-
------
--
-
-
------ ------- ------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670243c2d91dce0dc846f29d