什么是 Redux？
Redux 是 JavaScript 应用程序的可预测状态容器。它是 React 生态系统的一部分，被广泛用于构建复杂的前端应用。它的主要功能是集中管理应用程序的状态并使其易于维护。
Redux 的工作原理可以归纳为三个部分：store、action 和 reducer。本篇文章将逐一介绍这些概念以及它们之间的联系。
Store
Store 是 Redux 中最重要的部分。它是存储应用程序状态的单一对象。可以将其视为全局数据存储器，其中存储了应用程序的所有数据。
创建 Store 非常简单，可以使用 createStore 函数进行创建。下面是一个简单的示例：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const reducer = (state = {}, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
const store = createStore(reducer);以上代码创建了一个简单的 Store，其状态为一个空对象。createStore 函数需要一个 reducer 函数作为参数，该函数将处理所有应用程序的操作并将其应用于状态。
Action
Action 是一个对象，用于描述应用程序状态的更改。它包含一个 type 字段和一个载荷（payload）字段。 type 字段是必需的并用于描述正在发生的更改的类型。载荷是可选的并包含更改所需的任何数据。
以下是一个简单的 Action 示例：
{
type: 'INCREMENT',
payload: {
amount: 1,
},
}以上 Action 描述了要增加状态计数器的值。 type 字段为 INCREMENT，载荷是一个包含增量的对象。
Reducer
Reducer 是一个函数，用于计算应用程序状态的下一个状态。它接收当前状态和要执行的操作，根据操作的类型更改状态并返回新状态。
Reducer 函数必须是纯函数。它应该始终返回一个新状态的副本，而不应该修改先前的状态。以下是一个简单的 Reducer 示例：
// javascriptcn.com 代码示例
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + action.payload.amount };
case 'DECREMENT':
return { count: state.count - action.payload.amount };
default:
return state;
}
};以上 Reducer 描述了要增加或减少状态计数器的值。它接受当前状态和操作对象作为参数，并返回一个新的状态对象。
总结
Redux 是一种广泛使用的状态管理工具，是 React 开发的主要组成部分之一。它的工作原理可以简化为 Store、Action 和 Reducer 这三个组成部分。 Store 存储应用程序状态，Action 描述状态更改，Reducer 计算下一个状态。
上面的示例代码展示了 Redux 的基础知识。请注意，示例代码仅用于让您更好地理解概念，不应在实际应用程序中使用。实际应用程序的 Reducer 应该具有比示例更复杂的逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653d225b7d4982a6eb70a19e