在前端开发中，管理应用程序的状态是非常重要的。Redux 是一个流行的 JavaScript 库，它提供了一种可预测的状态管理方案，可以帮助开发者更好地管理应用程序的状态。
本文将介绍 Redux 的基本概念和用法，帮助读者了解 Redux 的工作原理和如何在项目中使用它。
Redux 概览
Redux 是一个 JavaScript 库，它提供了一种可预测的状态容器，可以管理应用程序的状态。Redux 是基于 Flux 架构的，但是相比 Flux，Redux 更加简单，易于理解和使用。
Redux 的核心思想是：应用程序的状态应该被存储在一个单一的状态树中，这个状态树是一个不可变的对象。当应用程序的状态发生变化时，Redux 会创建一个新的状态树，而不是修改原来的状态树。
Redux 包含三个主要的部分：
- Store：存储应用程序的状态树，提供了一些方法用于访问和修改状态树。
- Action：描述应用程序状态的变化，在 Redux 中，Action 是一个普通的 JavaScript 对象，它必须包含一个
type属性，用于描述 Action 的类型。 - Reducer：指定应用程序状态的变化如何响应 Action，它是一个纯函数，接收当前状态和 Action 作为参数，返回一个新的状态。
Redux 的工作流程
Redux 的工作流程可以概括为以下几个步骤：
- 应用程序的状态存储在一个单一的状态树中。
- 用户发起一个 Action，描述应用程序状态的变化。
- Store 调用 Reducer，根据 Action 返回一个新的状态。
- Store 更新状态树，通知应用程序的其他部分。
下面是一个简单的示例，演示 Redux 的工作流程：
// javascriptcn.com 代码示例
// 定义 Action 类型
const ADD_TODO = 'ADD_TODO';
// 定义 Action 创建函数
function addTodo(text) {
return {
type: ADD_TODO,
text
};
}
// 定义 Reducer
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
];
default:
return state;
}
}
// 创建 Store
const store = Redux.createStore(todos);
// 订阅 Store
store.subscribe(() => {
console.log(store.getState());
});
// 分发 Action
store.dispatch(addTodo('Learn Redux'));在上面的示例中，我们首先定义了一个 Action 类型和一个 Action 创建函数。然后，我们定义了一个 Reducer，用于根据 Action 返回一个新的状态。接着，我们创建了一个 Store，并将 Reducer 传递给 Store。最后，我们订阅了 Store，当状态发生变化时，会调用订阅函数输出状态。
最后，我们分发了一个 Action，Redux 会自动调用 Reducer，返回一个新的状态，并更新 Store。
Redux 的核心概念
Store
Store 是 Redux 中最重要的部分，它存储了应用程序的状态树，并提供了一些方法用于访问和修改状态树。
创建 Store 的方法如下：
const store = Redux.createStore(reducer);
在上面的代码中，我们通过 Redux.createStore 方法创建了一个 Store，传入了一个 Reducer。
Store 的常用方法如下：
getState()：获取当前的状态树。dispatch(action)：分发一个 Action，触发 Reducer 返回一个新的状态。subscribe(listener)：订阅 Store 的状态变化，当状态发生变化时，会调用订阅函数。
Action
Action 是一个普通的 JavaScript 对象，用于描述应用程序状态的变化。Action 必须包含一个 type 属性，用于描述 Action 的类型。除了 type 属性，Action 还可以包含其他的属性，用于描述状态的变化。
创建 Action 的方法如下：
const action = {
type: 'ADD_TODO',
text: 'Learn Redux'
};在上面的代码中，我们创建了一个 Action，用于向应用程序的状态树中添加一个 TODO。
Reducer
Reducer 是一个纯函数，用于指定应用程序状态的变化如何响应 Action。Reducer 接收当前的状态和 Action 作为参数，并返回一个新的状态。
Reducer 的格式如下：
function reducer(state, action) {
// 处理 Action，返回新的状态
return newState;
}在上面的代码中，我们定义了一个 Reducer，用于根据 Action 返回一个新的状态。
Redux 的使用示例
下面是一个使用 Redux 的示例，演示如何创建一个 TODO 应用程序。
// javascriptcn.com 代码示例
// 定义 Action 类型
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
// 定义 Action 创建函数
let nextTodoId = 0;
function addTodo(text) {
return {
type: ADD_TODO,
id: nextTodoId++,
text
};
}
function toggleTodo(id) {
return {
type: TOGGLE_TODO,
id
};
}
function setVisibilityFilter(filter) {
return {
type: SET_VISIBILITY_FILTER,
filter
};
}
// 定义 Reducer
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
];
case TOGGLE_TODO:
return state.map(todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
);
default:
return state;
}
}
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
}
// 定义组合 Reducer
const todoApp = Redux.combineReducers({
todos,
visibilityFilter
});
// 创建 Store
const store = Redux.createStore(todoApp);
// 订阅 Store
store.subscribe(() => {
console.log(store.getState());
});
// 分发 Action
store.dispatch(addTodo('Learn Redux'));
store.dispatch(toggleTodo(0));
store.dispatch(setVisibilityFilter('SHOW_COMPLETED'));在上面的示例中，我们首先定义了三个 Action 类型和三个 Action 创建函数，用于描述 TODO 应用程序中的状态变化。然后，我们定义了两个 Reducer，一个用于处理 TODO，一个用于处理过滤器的变化。接着，我们使用 Redux.combineReducers 方法将两个 Reducer 组合成一个 Reducer。最后，我们创建了一个 Store，并将组合 Reducer 传递给 Store。
在分发 Action 时，我们可以调用 Action 创建函数，并传递参数，Redux 会自动调用 Reducer，返回一个新的状态，并更新 Store。
总结
Redux 是一个流行的 JavaScript 库，它提供了可预测的状态管理方案，可以帮助开发者更好地管理应用程序的状态。Redux 的核心思想是应用程序的状态应该被存储在一个单一的状态树中，当应用程序的状态发生变化时，Redux 会创建一个新的状态树，而不是修改原来的状态树。Redux 包含三个主要的部分：Store、Action 和 Reducer。Store 存储应用程序的状态树，提供了一些方法用于访问和修改状态树；Action 描述应用程序状态的变化；Reducer 指定应用程序状态的变化如何响应 Action，它是一个纯函数，接收当前状态和 Action 作为参数，返回一个新的状态。在使用 Redux 时，可以使用 createStore 方法创建一个 Store，使用 Action 创建函数创建一个 Action，使用 Reducer 指定应用程序状态的变化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a9823d2f5e1655d4ff841