什么是 Redux？
Redux 是一个 JavaScript 应用程序的状态管理库。它可以让我们预测应用程序的行为，使得代码更容易理解和维护。Redux 是一个非常受欢迎的 JavaScript 库，它被广泛使用在许多不同的应用程序中。
Redux 主要有三个核心原则：
- 单一数据源：应用程序状态存储在一个对象中，称为 Store。
- 状态只读：当我们想要更改应用程序的状态时，我们必须通过一个 action 创建一个新的状态。
- 状态更改通过纯函数完成：我们使用纯函数（reducers）来处理状态更新。reducers 接收旧的状态和一个 action，返回一个新的状态。
在 Redux 中，我们使用 Store 来存储应用程序的全局状态。当我们想要在应用程序中更改状态时，我们必须使用一个 action 来描述这个更改。这个 action 是一个简单的对象，它至少包含一个 type 属性和一些附加数据。当我们分发（dispatch）一个 action 时，Redux 会将其发送给我们的 reducers 来创建新的应用程序状态。reducers 是纯函数，它们接收旧的状态和一个 action，然后返回一个新的状态。
Redux 基础概念
Store
Store 是 Redux 中最重要的概念之一。它是存储整个应用程序状态的地方。我们使用 createStore() 函数来创建 Store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
--------
------ ------
-
--
----- ----- - ---------------------在上面的代码中，我们创建了一个 reducer 函数来处理状态更新。我们创建了一个简单的 Store，它的初始状态是一个空对象。我们还传递了 reducer 函数给 createStore() 函数来创建 Store。
Action
Action 是 Redux 中描述状态更改的对象。它只是一个简单的 JavaScript 对象，它至少包含一个 type 属性和一些附加数据。当我们分发一个 action 时，它被发送给我们的 reducers 来创建新的应用程序状态。
const addItem = (item) => {
return {
type: 'ADD_ITEM',
payload: item,
};
};
store.dispatch(addItem({ id: 1, name: 'item 1' }));在上面的代码中，我们创建了一个 addItem() action 创建函数，它会返回一个 action 对象。然后我们使用 store.dispatch() 函数来将 action 分发给 reducers 以更新应用程序状态。
Reducer
Reducer 是 Redux 中处理状态更新的函数。它接收旧的状态和一个 action，然后返回一个新的状态。Reducer 必须是一个纯函数，它不应该改变输入参数，也不应该有任何副作用。
const reducer = (state = {}, action) => {
switch (action.type) {
case 'ADD_ITEM':
return { ...state, items: [...state.items, action.payload] };
default:
return state;
}
};在上面的代码中，我们创建了一个 reducer 函数来处理 ADD_ITEM action。如果 action.type 是 ADD_ITEM，我们将创建一个新的状态对象，它是通过将 action.payload 添加到现有 items 数组中创建的。否则，我们返回当前的状态。
Redux 工作流程
Redux 的工作流程可以分为三个步骤：
- 创建一个 action。
- 将 action 分发给 reducers。
- reducers 返回新的状态。
创建一个 action
我们使用 action 创建函数来创建一个 action。这个函数必须返回一个描述 action 的对象。
const addItem = (item) => {
return {
type: 'ADD_ITEM',
payload: item,
};
};在上面的代码中，我们创建了一个 addItem() action 创建函数，它会返回一个 action 对象。
分发 action
我们使用 store.dispatch() 函数来分发 action，它将 action 发送给我们的 reducers。
store.dispatch(addItem({ id: 1, name: 'item 1' }));在上面的代码中，我们将一个 ADD_ITEM action 发送给 reducers。
reducers 返回新的状态
reducers 接收旧的状态和一个 action，然后返回一个新的状态。reducers 必须是纯函数，它不应该改变输入参数，也不应该有任何副作用。
const reducer = (state = {}, action) => {
switch (action.type) {
case 'ADD_ITEM':
return { ...state, items: [...state.items, action.payload] };
default:
return state;
}
};在上面的代码中，我们创建了一个 reducer 函数来处理 ADD_ITEM action。如果 action.type 是 ADD_ITEM，我们将创建一个新的状态对象，它是通过将 action.payload 添加到现有 items 数组中创建的。否则，我们返回当前的状态。
Redux 实战
在本节中，我们将使用 Redux 构建一个简单的应用程序来添加和删除项目。
安装
在开始实战之前，我们需要安装 Redux：
npm install redux
创建 Store 和 Reducers
我们需要创建 Store 和 Reducer。在我们的应用程序中，我们只有一个 reducer（itemsReducer），它将处理 ADD_ITEM 和 REMOVE_ITEM action。我们还需要为 Store 创建一个初始状态，我们将在这个状态对象中存储我们的项目。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
---- --------------
------ -
---------
------ ------------------------- -- ------- --- ----------------
--
--------
------ ------
-
--
----- ----- - --------------------------在上面的代码中，我们创建了一个初始状态为 items 数组为空的 initialState 对象，我们还创建了一个 itemsReducer 函数来处理 ADD_ITEM 和 REMOVE_ITEM action。
创建 Action
我们需要创建两个 action，ADD_ITEM 和 REMOVE_ITEM。
-- -------------------- ---- -------
------ ----- ------- - ------ -- -
------ -
----- -----------
-------- - -------- --- ------------- --
--
--
------ ----- ---------- - ---- -- -
------ -
----- --------------
-------- ---
--
--在上面的代码中，我们创建了两个 action，ADD_ITEM 和 REMOVE_ITEM。ADD_ITEM action 接收一个项目对象并分配一个随机的 id。REMOVE_ITEM 接收一个项目的 id。
创建 Reducer
我们需要创建一个 reducer 来处理 ADD_ITEM 和 REMOVE_ITEM action。
-- -------------------- ---- -------
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
---- --------------
------ -
---------
------ ------------------------- -- ------- --- ----------------
--
--------
------ ------
-
--在上面的代码中，我们创建了一个 itemsReducer 函数来处理 ADD_ITEM 和 REMOVE_ITEM action。ADD_ITEM action 将项目添加到状态数组中。REMOVE_ITEM action 将 id 在数组中匹配的项目删除。
创建视图
我们将创建一个简单的 React 视图来显示我们的项目列表和输入框。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- ---------- - ---- ------------
----- -------- - -- -- -
----- ------- --------- - -------------
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- ------------- - -- -- -
-- ------------- --- --- -------
------------------ ----- ----- ----
-------------
--
------ -
-----
-------- ---------
------ ------------- ------------- -- ------------------------- --
------- --------------------------- -------------
----
----------------- -- -
--- --------------
------------- --
------- ----------- -- -----------------------------------------
-----
---
-----
------
--
--
------ ------- ---------在上面的代码中，我们使用 useSelector 钩子从 Store 获取 items 数组。我们还使用 useDispatch 钩子获取分发 action 的函数。我们创建了一个 handleAddItem 函数来添加项目，并清空文本框。在项列表中，我们使用 map 函数来遍历项目数组，然后使用 removeTodo 函数从 Store 中删除项目。
入口文件
我们在入口文件中创建了一个 Store 并使用 Provider 组件将其绑定到 React 应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ -------- ---- -------------
------ ------------ ---- -------------
----- ----- - --------------------------
----------------
--------- --------------
--------- --
------------
-------------------------------
--在上面的代码中，我们创建了一个 Store 并传递给 Provider 组件。TodoList 组件将有访问 Store 和 dispatch 函数的能力。
结论
在本文中，我们介绍了 Redux 的基础知识，包括 Store、Action 和 Reducer。我们还通过实战演示了如何使用 Redux 构建一个简单的应用程序。希望读者可以从本文中获得 Redux 的入门知识，然后开始学习更高级的 Redux 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f81d8e9a7045d0d73bc62