Redux 是一个状态管理库，它可以用于在 React 应用程序中管理应用程序的状态。Redux 将应用程序状态存储在一个单一的“状态树”中，并允许通过 dispatching actions 来更改状态。在本文中，我们将介绍如何在 React 项目中引入 Redux。
步骤一：安装 Redux
首先，我们需要安装 Redux。可以使用以下命令在您的项目中安装 Redux：
npm install redux
步骤二：创建 Redux store
在你的应用程序中，请使用 combineReducers 函数将所有的 reducer 进行合并。在此示例中，我们将创建一个 simpleReducer。在我们的示例中，我们将使用 JSONplaceholder API 来模拟异步数据获取。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ ------------- ---- --------------------------- ----- ----------- - ----------------- -------------- --- ----- ----- - ------------ ------------ ---------------------- -- ------ ------- ------
注意，我们还添加了两个 Redux 中间件 applyMiddleware 和 thunk。applyMiddleware 函数是 Redux 提供的一个方法，它用于在 dispatch action 期间执行其他功能。thunk 是 Redux 中一个中间件，它允许我们返回一个函数而非一个 action，来支持异步操作。
步骤三：创建 Redux Action
Action 是一个对象，它描述要进行的更改。例如，我们可以使用以下代码创建一个更新 store 中名称的 action：
export const UPDATE_NAME = 'UPDATE_NAME';
export function updateName(name) {
return {
type: UPDATE_NAME,
payload: name,
};
}步骤四：创建 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