在 React 应用中，使用 Redux 是一个非常流行的状态管理方案。Redux 提供了一个可预测的状态容器，使得应用的状态管理更加清晰和可维护。在实际应用中，我们经常需要在 React 应用中使用 Redux 来管理应用的状态。本文将介绍如何在 React 应用中使用 React-redux store 和便加 Redux/thunk 导航。
安装和配置
首先，我们需要安装 Redux 和 React-redux 库。可以使用 npm 或者 yarn 安装：
npm install --save redux react-redux
或者
yarn add redux react-redux
安装完成后，我们需要在应用中配置 Redux。我们需要创建一个 Redux store，并将其提供给 React 应用中的组件。在 React 应用中，我们可以使用 React-redux 提供的 Provider 组件来提供 Redux store。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ --- ---- -------
------ ----------- ---- ------------
----- ----- - ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
-在上面的代码中，我们首先引入了 React、ReactDOM、React-redux 和 Redux 库。然后，我们创建了一个 Redux store，并将其提供给 Provider 组件。最后，我们将 Provider 组件和应用的根组件 App 渲染到页面上。
在组件中使用 Redux store
在 React 应用中，我们可以使用 React-redux 提供的 connect 函数来将 Redux store 中的状态映射到组件的 props 上。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ------- - -- ------ --------- -- -- -
-----
---------- ------------
------- --------------------------------------
------
-
----- --------------- - ----- -- --
------ -----------
--
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
--
------ ------- ------------------------ ----------------------------在上面的代码中，我们定义了一个 Counter 组件，它从 Redux store 中获取一个名为 count 的状态，并提供一个 increment 方法来更新该状态。然后，我们使用 connect 函数将 Counter 组件连接到 Redux store 上。
connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数用于将 Redux store 中的状态映射到组件的 props 上，mapDispatchToProps 函数用于将 Redux store 中的操作映射到组件的 props 上。
使用 Redux-thunk 导航
在实际应用中，我们经常需要在 React 应用中使用 Redux-thunk 来处理异步操作。Redux-thunk 允许我们在 Redux store 中定义异步操作，并在操作完成后更新状态。下面是一个简单的示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ - -------------------- - ---- --------- ------ - ---------------- - ---- ------------------------ ------ ----------- ---- ------------ ------ ----- ------- - ---------------------- ----- ----------- - ------- -------------------------- ----- ----- - ------------ --------------------- ------------------------------- - ------ ------- -----
在上面的代码中，我们首先引入了 Redux-thunk 和 React-router 库。然后，我们创建了一个浏览器历史记录对象，并使用 connected-react-router 提供的 routerMiddleware 函数将其与 Redux store 连接。最后，我们创建了一个 Redux store，并将 Redux-thunk 和 routerMiddleware 中间件应用到其中。
在组件中使用 Redux-thunk 导航非常简单。我们可以使用 push 函数来导航到不同的页面。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - ---- - ---- ------------------------
----- ---------- - -- ---- -- -- -
-----
------- ----------- -- ------------------------
------- ----------- -- ------------------------------
------- ----------- -- ----------------------------------
------
-
----- ------------------ - -
----
-
------ ------- ------------- -------------------------------在上面的代码中，我们定义了一个 Navigation 组件，它提供了三个按钮，用于导航到不同的页面。然后，我们使用 connect 函数将 Navigation 组件连接到 Redux store 上，并将 push 函数映射到组件的 props 上。
结论
在本文中，我们介绍了如何在 React 应用中使用 Redux 和 Redux-thunk。我们首先安装和配置了 Redux 和 React-redux 库，然后在组件中使用了 Redux store。最后，我们使用 Redux-thunk 导航到不同的页面。希望本文对你有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6725ba432e7021665e189073