React 是一个非常流行的 JavaScript 库，用于构建复杂的用户界面。虽然 React 拥有自己的状态管理系统，但随着应用程序的复杂度增加，我们需要更可靠和可扩展的解决方案。这就是 Redux 的用武之地，它可以让你轻松管理 React 应用的状态。
Redux 简介
Redux 是一个基于 Flux 架构的状态管理库。它提供可预测的状态容器，让你可以管理整个应用程序的状态。Redux 中有三个主要部分：
- Store：存储着整个应用程序的状态。
- Action：描述对状态的修改操作。
- Reducer：实际执行状态修改的函数。
Redux 应用遵循“单向数据流”的模式，其中组件通过派发 Action 更新 Store 状态，之后 Reducer 函数根据收到的 Action 修改状态，并通知所有已订阅状态变更的组件重新渲染。
React-Redux 简介
React-Redux 是 Redux 官方推荐的与 React 集成的一种方式。它提供了两个主要功能：
- 把 Redux Store 的状态传递给 React 组件（Connect）。
- 在 React 组件中触发 Redux Actions。
React-Redux 的核心是 Provider 和 Connect。
Provider
Provider 是 React-Redux 提供的顶层组件，它接收一个指定的 Redux Store，然后将其作为上下文传递给整个组件树。这非常有用，因为我们无需手动地将 Store 传递给每个需要它的子组件。
------ - -------- - ---- --------------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--Connect
Connect 是另一个 React-Redux 提供的函数，它可以连接你的 React 组件到 Redux Store 中的状态和触发器上，并将其作为组件的 props 传递给组件。Connect 接收两个参数：
- mapStateToProps：一个函数，可以让你从 Store 的当前状态中选择性地提取数据并将其作为组件的 prop 传递给组件。
- mapDispatchToProps：一个对象或函数，可以让你把 Action 分发操作作为 props 传递给组件中触发的回调函数。
例如，在我们的组件中，我们想要访问名为 user 的 Store 状态，并分发一个 setUser Action：
------ - ------- - ---- -------------- ------ - ------- - ---- ------------ -------- ------------- ----- ------- -- - -- -- ---- - ------- ------ - ----- --------------- - ----- -- -- ----- ----------- --- ----- ------------------ - - -------- -- ------ ------- ------------------------ ---------------------------------
现在我们已经知道了如何使用 React-Redux 来访问 Store 和分发 Actions，但如何创建 Reducers 并产生 State 呢？这里有一个简单的例子。
实现 Reducer
Reducer 函数接收两个参数，第一个是当前状态，第二个是要执行的 Action。根据 Action 类型判断需要对状态进行何种修改，最终返回新的 State 对象。下面是一个示例 Reducer，用于管理 React 应用程序的用户身份验证状态：
----- ------------ - -
---------------- ------
------------ -----
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------
------ -
---------------- -----
------------ --------------------
--
---- ---------
------ -
---------------- ------
------------ -----
--
--------
------ ------
-
-
------ ------- ------------结论
React-Redux 可以让你更优雅地在 React 应用程序中使用 Redux。在开发大型
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729ed90ddd3a70eb6cebbf3