前言
Redux 是一个流行的 JavaScript 应用程序状态管理工具。它提供了一种可预测的状态管理方法，以便我们在应用程序中轻松地处理数据流和状态管理。本文将详细介绍 Redux 的概念、工作原理以及如何将其用于实际项目中。
Redux 的基本概念
Redux 的主要目标之一是使应用程序的状态变化变得可预测。它实现了单向数据流，这意味着应用程序中的数据只能在一个方向上流动。而且，在 Redux 中，应用程序的状态被存储在一个单一的对象中，称为“state”。
Action
Action 是 Redux 中最基本的概念。它是一个包含要执行的操作的对象。例如，当用户单击应用程序中的按钮时，应用程序将创建一个 Action 对象，然后 Redux 将负责在应用程序中找到与该 Action 相关联的 Reducer，并执行相应的操作。
Action 对象通常包含一个类型（type）、负载（payload）和任意其他数据。类型是用于标识 Action 的字符串。这就是 Reducer 如何知道要执行哪个操作。负载是一个任意的 JavaScript 对象，它是执行操作所需的任意数据。
下面是一个示例 Action 对象：
{
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Get milk'
}
}Reducer
Reducer 是一个函数，它负责根据 Action 的类型更新应用程序的状态。当 Reducer 接收到 Action 对象时，它会从应用程序的状态中查找相关的数据，并执行相应的操作。
它采用两个参数：当前的应用程序状态和一个 Action 对象。然后使用这些值来计算一个新的应用程序状态。Reducer 函数必须是纯函数，这意味着它不应该修改它的输入参数，并且它应该始终返回一个新的对象。
下面是一个简单的 Reducer 示例：
-- -------------------- ---- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
--------------
--
---- --------------
------ ----------------- -- ------- --- -------------------
--------
------ ------
-
-Store
Store 是 Redux 中的重要概念。它是一个负责管理应用程序状态的对象。它维护了应用程序的状态，并将其传递给需要访问该状态的组件。Store 也负责注册监听器，当状态发生变化时，通知这些监听器。
Store 对外暴露了三个方法：getState()、dispatch(action) 和 subscribe(listener)。getState() 方法返回当前的应用程序状态。dispatch(action) 方法将一个 Action 对象分派给应用程序的 Reducer。subscribe(listener) 方法注册一个监听器，它将在状态更改时调用。
以下是一些示例 Store 代码：
import { createStore } from 'redux';
import todosReducer from './todosReducer';
const store = createStore(todosReducer);Dispatch
Dispatch 是将 Action 对象分派给应用程序中的 Reducer 的过程。它是应用程序中发送 Action 的唯一方法。Store 对象的 dispatch() 方法用于将 Action 对象分派给 Reducer。
Selector
Selector 是用于从应用程序状态中检索数据的函数。可以通过使用 createSelector() 方法来创建 Selector。
import { createSelector } from 'reselect';
const getTodos = state => state.todos;
const getTodoById = createSelector(
[getTodos, (state, props) => props.id],
(todos, id) => todos.find(todo => todo.id === id)
);Redux 的工作原理
Redux 的工作原理可以被简述为“数据流”。这种方式确保了应用程序状态的变化是可预测的。
当组件触发某个事件时，它将创建一个 Action 对象并将其发送到 Store。Store 将接收到的 Action 对象转发给应用程序中的 Reducer。Reducer 将计算一个新的应用程序状态，并将其返回给 Store。Store 将状态更新通知所有订阅的组件。此后，组件将使用新状态重新渲染。
Redux 中每个部分的工作原理如下：
- Action：Action 是一个含有 type 和 payload 属性的简单对象。它用于描述某个事件的类型和数据。
- Reducer：Reducer 是一个纯函数，接收应用程序的当前状态和一个 Action 对象。该函数通过计算新的状态来响应事件。
- Store：Store 负责存储整个应用程序的状态，并在响应事件时更新该状态。
- Selector：Selector 是一个用于从应用程序状态中提取数据的函数。
Redux 在实战中的应用
让我们使用一个简单的 TodoList 应用程序来演示如何使用 Redux。在这个应用程序中，我们将使用 Redux 来处理 Todo 的添加、删除和完成状态。
- 创建一个新的 React 应用程序：
npx create-react-app todo-list-redux
- 安装 Redux 和 React-Redux：
npm install redux react-redux
- 创建一个新的 todosReducer.js 文件，并添加一个简单的 Reducer：
-- -------------------- ---- -------
----- ------------ - -
- --- -- ----- ---- ------ ---------- ----- --
- --- -- ----- ----- --------- ---------- ---- --
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- -------------------- ----- -- ----------------- ------- --- - --
----- --------------------
---------- -----
-
--
---- --------------
------ ----------------- -- ------- --- -------------------
---- --------------
------ -------------- -- ------- --- ----------------- - - -------- ---------- --------------- - - ------
--------
------ ------
-
-
------ ------- -------------- 创建一个新的 rootReducer.js 文件，并将 todosReducer 导入并合并：
import { combineReducers } from 'redux';
import todosReducer from './todosReducer';
const rootReducer = combineReducers({
todos: todosReducer
});
export default rootReducer;- 在应用程序中创建一个 store，并将 rootReducer 传递给它：
import { createStore } from 'redux';
import rootReducer from './rootReducer';
const store = createStore(rootReducer);- 创建一个 TodoList 组件，它将从 store 中获取 todos。在 componentDidMount 方法中，我们将创建一个简单的 Action 并将其分派给 store。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- -------- ------- --------- -
------------------- -
---------------------
----- -----------
-------- -
----- ------ ------
-
---
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
----
--------------- -- -
--- --------------
-----------
-----
---
-----
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- ------------------------------------ 将 TodoList 组件添加到应用程序中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------
------ -------- ---- -------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
--------- --
------
--
-
-
------ ------- ----现在，应用程序会在渲染时添加一个新的 Todo 到 todos 数组中。我们可以在调试器中看到 Redux 状态如何更新，这里将包括新创建的 Todo。
之后你可以添加实现删除 Todo 和切换 Todo 完成状态的逻辑，以便完整地使用 Redux 。
结论
Redux 是一个流行的状态管理工具，它提供了一种可预测的状态管理方式。Redux 将应用程序状态保存在一个单一的对象中，并使用 Action 和 Reducer 来实现数据流。Store 负责管理应用程序中的状态，并通知订阅的组件。Selector 是从应用程序状态中检索数据的函数。
我们已经学习了如何创建 Redux 应用程序，在创建应用程序状态、创建 Reducer、创建 Store 和传递状态给组件方面进行了详细的说明。希望这篇 Redux 教程可以帮助你更好地理解 Redux，并帮助你在实际项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671d55239babaf620fb5a1ea