Redux 是一个状态管理库，它可以用于在 React 应用程序中管理应用程序的状态。Redux 将应用程序状态存储在一个单一的“状态树”中，并允许通过 dispatching actions 来更改状态。在本文中，我们将介绍如何在 React 项目中引入 Redux。
步骤一：安装 Redux
首先，我们需要安装 Redux。可以使用以下命令在您的项目中安装 Redux：
--- ------- -----
步骤二：创建 Redux store
在你的应用程序中，请使用 combineReducers 函数将所有的 reducer 进行合并。在此示例中，我们将创建一个 simpleReducer。在我们的示例中，我们将使用 JSONplaceholder API 来模拟异步数据获取。
------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ ------------- ---- --------------------------- ----- ----------- - ----------------- -------------- --- ----- ----- - ------------ ------------ ---------------------- -- ------ ------- ------
注意，我们还添加了两个 Redux 中间件 applyMiddleware 和 thunk。applyMiddleware 函数是 Redux 提供的一个方法，它用于在 dispatch action 期间执行其他功能。thunk 是 Redux 中一个中间件，它允许我们返回一个函数而非一个 action，来支持异步操作。
步骤三：创建 Redux Action
Action 是一个对象，它描述要进行的更改。例如，我们可以使用以下代码创建一个更新 store 中名称的 action：
------ ----- ----------- - --------------
------ -------- ---------------- -
------ -
----- ------------
-------- -----
--
-步骤四：创建 Redux Reducer
Reducer 是用于更新状态的函数。它们采用当前状态和要进行的 action，并返回一个新的状态。在此示例中，我们将创建一个 simpleReducer。
------ - ----------- - ---- --------------------------
----- ------------ - -
----- ---
--
------ ------- -------- ------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
----- ---------------
--
--------
------ ------
-
-步骤五：在 React 组件中使用 Redux
要使用 store 中的状态，请在组件中导入 connect 函数。connect 函数允许我们将 store 数据作为 props 提供给组件。
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- --------------------------
----- ----------- ------- --------- -
-------- -
------ -
-----
------
-----------
------------------------------
----------- -- --------------------------------------
--
------------------------
------
--
-
-
----- --------------- - ----- -- --
----- -------------------------
---
----- ------------------ - -
-----------
--
------ ------- ------------------------ ---------------------------------在此示例中，我们连接了状态，将 state.simpleReducer.name 映射到组件属性 name 中，并将 updateName 映射到 dispatch 函数中。
结论
现在，您已经知道如何在 React 项目中引入 Redux，我们可以在项目中使用 Redux 管理状态。只需按照上面的步骤，即可在您的项目中轻松使用 Redux 来管理状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f69beac5c563ced58aa054