在前几篇文章中，我们已经学习了 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
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497a6f148841e98944a6a81
