在前几篇文章中，我们已经学习了 Redux 的基础概念和使用方法。 在实际的开发中，Redux 不是单独使用的，而是通常与 React 结合使用。这些东西是如何结合在一起的？这就是 React-Redux 库打造的目标。
1. React-Redux 简介
React-Redux 是一个为 React 应用提供状态管理的库。它通过提供一个 "Provider" 组件来传递 Redux 的 store，还提供用于连接组件和 store 的 "connect" 方法，使得组件可以访问 store 中的状态。
React-Redux 是 Redux 官方推荐的 React 绑定库，并且已经被集成到 Redux 核心库中。它的目的是简化在 React 中使用 Redux，减少样板代码和提供更好的性能。
2. 安装和使用
安装 React-Redux 可以通过 npm 完成。
npm install react-redux
安装完后，我们在 React 应用中使用 React-Redux：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这里，我们通过 "Provider" 组件来传递 Redux 的 store。这样所有的子组件都可以访问 store 中的状态了。
接着，在组件中我们可以访问 "store" 中的状态：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- - ------- -- -
------ -
-----
- ----------- -
------- --------- ----------------- --------------------
------
--
--
----- --------------- - ------- -- -
------ -
------ -----------
--
--
----- ------------------ - ---------- -- -
------ -
------------ -- -- -
---------- ----- ----------- --
-
--
--
------ ------- --------
----------------
------------------
-----------我们可以使用 "connect" 方法将我们的组件连接到 store：
- mapStateToProps 方法返回一个包含需要读取的 state 属性的对象。该方法被执行时，将 store 的 state 作为参数传入，然后返回一个对象，这个对象指定了我们需要在组件中使用的 state 属性。
- mapDispatchToProps 方法返回一个包含要分发的 action 创建函数的对象。该方法被执行时，会传入 store 的 dispatch 函数，我们通过这个函数将 action 分发到 store 中。
connect 方法被调用后返回一个函数，该函数接受我们的组件作为参数，并将 store 中的数据和分派到 store 的 action 作为属性传递给组件。
3. 总结
通过 React-Redux，我们可以更容易地在 React 应用中使用 Redux，减少样板代码并提高性能。我们可以使用 Provider 组件来将 Redux 的 store 传递给我们的应用程序，并使用 connect 方法将组件连接到 store，以便访问 store 中的状态和操作。
如果你想深入学习 React-Redux 的更多细节，那么官方文档是个不错的选择：
https://redux.js.org/basics/usage-with-react#implementing-container-components
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6497a6f148841e98944a6a81