Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助你在 React 应用中管理复杂的状态。Redux 可以帮助你更好地组织和管理应用程序数据，使得在不同组件之间共享和传递数据变得更加容易。本文将介绍 Redux 的基本概念和用法，以及如何在 React 应用中实现有状态的 UI 组件。
Redux 的基本概念
Redux 的核心概念包括：
- Store：存储应用程序的状态，是一个 JavaScript 对象。
- Action：描述应用程序中发生的事件，是一个 JavaScript 对象，包含一个 type 属性来描述事件类型。
- Reducer：描述如何处理应用程序中的事件，是一个纯函数，接受当前状态和一个 action 对象作为输入，返回一个新的状态。
- Dispatch：触发一个 action，让 reducer 处理它，并更新应用程序的状态。
Redux 的数据流是单向的，从组件 -> action -> reducer -> store -> 组件。组件通过 dispatch 发送 action，reducer 根据 action 更新 store 中的状态，然后组件从 store 中获取新的状态。
在 React 应用中使用 Redux
在 React 应用中使用 Redux 需要安装以下库：
npm install redux react-redux
创建 Store
使用 Redux，我们需要创建一个 store，来存储应用程序的状态。在 React 应用中，通常在 src/index.js 文件中创建 store：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们使用 createStore 函数来创建一个 store，并将 rootReducer 作为参数传递给它。rootReducer 是一个纯函数，用于处理不同的 action，返回新的状态。Provider 组件从 react-redux 库中导入，它将 store 传递给 React 应用程序的所有组件。
创建 Action
创建 action 的方法是定义一个函数，这个函数返回一个包含 type 属性的对象。例如，我们可以定义一个 addTodo 函数来创建添加 todo 的 action：
export const addTodo = (text) => ({
type: 'ADD_TODO',
payload: {
text,
},
});在上面的代码中，我们定义了一个 addTodo 函数，它返回一个对象，包含一个 type 属性和一个 payload 属性。type 属性描述了 action 的类型，payload 属性包含了需要传递给 reducer 的数据。
创建 Reducer
Reducer 是一个纯函数，它接收当前状态和一个 action，返回一个新的状态。例如，我们可以定义一个 todos reducer，用于处理添加 todo 的 action：
-- -------------------- ---- -------
----- ------------ - -
------ ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
--
--------
------ ------
-
--在上面的代码中，我们定义了一个 todosReducer 函数，它接收当前状态和一个 action，返回一个新的状态。在 ADD_TODO case 中，我们使用 ES6 展开语法来创建一个新的状态对象，并在 todos 数组中添加一个新的 todo。
使用 Connect 连接组件和 Store
在 React 中，我们使用 connect 函数将组件连接到 store。connect 函数接收两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数将 store 中的状态映射到组件的 props 中，mapDispatchToProps 函数将 action 创建函数映射到组件的 props 中。例如，我们可以将上面定义的 addTodo 函数映射到组件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- -------- - -- ------ ------- -- -- -
----- ------ -------- - -------------------
----- ------------ - --- -- -
-------------------
--------------
------------
--
------ -
-----
----- ------------------------
------ ----------- ------------ ------------- -- ------------------------ --
------- ----------------- -------------
-------
----
----------------- ------ -- -
--- ----------------------------
---
-----
------
--
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
--------
--
------ ------- ------------------------ ------------------------------在上面的代码中，我们使用 connect 函数将 TodoList 组件连接到 store。mapStateToProps 函数将 todos 状态映射到组件的 props 中，mapDispatchToProps 函数将 addTodo 函数映射到组件的 props 中。
总结
Redux 是一个很好的状态管理库，它可以帮助我们更好地组织和管理应用程序数据。在使用 Redux 时，我们需要创建一个 store，定义 action 和 reducer，并使用 connect 函数将组件连接到 store。希望本文能够帮助你更好地理解 Redux，在 React 应用程序中实现有状态的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f4469f2b3ccec22fca4cea