在 React 应用中，使用 Redux 管理数据的方式越来越流行。Redux 是 JavaScript 中一个小而精致的状态容器，适用于多个 React 组件之间的数据共享。而 react-redux 是 Redux 官方推荐的包，可以让 React 应用更方便地使用 Redux。
本文将介绍如何使用 react-redux 包，并给出详细的示例代码。
安装 react-redux 包
安装 react-redux 包很简单，只需要进入项目的根目录，打开终端，运行以下命令即可：
--- ------- -----------
创建 Redux store
在使用 react-redux 之前，需要先创建一个 Redux store 用于存储应用的状态。Redux store 包含了该应用的所有状态，并通过 reducer 方法来处理（修改）状态。下面是一个示例代码：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - -------------------------
这里我们引入了 Redux 的 createStore 方法和一个 rootReducer，通过 createStore 方法创建出了一个 Redux store 对象，并将 rootReducer 传入其中。
rootReducer 是我们自己定义的，它是一个纯函数，接受一个 state 和一个 action 参数，返回一个新的 state。下面是一个简单的 rootReducer：
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-这个 rootReducer 处理了两个 action：INCREMENT 和 DECREMENT，分别用于增加和减少 count 的值。
使用 react-redux 包
在创建了 Redux store 后，就可以开始使用 react-redux 包了。下面是一个简单的例子：
------ ----- ---- --------
------ -------- ---- ------------
------ - --------- ------- - ---- --------------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - -------------------------
-------- -------------- -
------ -
-----
----------------------
------- ----------- -- ---------------- ----- ----------- --------------
------- ----------- -- ---------------- ----- ----------- --------------
------
--
-
----- ---------------- - ------------- -- ----------------
----------------
--------- --------------
----------------- --
------------
-------------------------------
--这个例子中，我们把 Counter 组件传入了 connect 方法中，并返回了一个新的 ConnectedCounter 组件。在 Provider 组件中，我们将 store 传入其中，将所有子组件包含在 Provider 中，这意味着所有的子组件都可以访问 store。
在 Counter 组件中，我们使用了 props 参数来访问 store 中的 count 变量，并将 dispatch 方法传入按钮的 onClick 事件中，来触发 INCREMENT 和 DECREMENT action。
结语
通过上面的示例，我们可以看到 react-redux 包的易用性与方便性。它可以帮助我们轻松地使用 Redux，有效地管理我们的应用程序状态。
在实际开发中，我们可能需要更复杂的状态管理方式。但是，使用 react-redux 包可以帮助我们快速入门 Redux，为后续的深入学习打下坚实的基础。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e681e8991b448d789a