如果你正在学习前端开发，那么你一定听说过 Redux。Redux 是一个 JavaScript 状态管理库，用于管理应用程序的状态。Redux 基于 Flux 架构，但是 Redux 更加简单、灵活，使用者也更多。
在这篇文章中，我们将介绍 Redux 中的三个核心概念：Action、Store 和 Reducer，并通过示例代码来说明其用法。
Action
Action 是 Redux 中的一个对象，用于描述一个事件。一个 Action 对象包含两个属性：type 和 payload。
- type：用于描述事件的类型，是一个字符串。
- payload：用于传递事件的数据，可以是一个对象或者其他数据类型。
Redux 中的每个事件都会生成一个 Action 对象，并被传递到 Store 中。Action 可以被发起到 Store 中，也可以被其他组件或者插件监听到。
例如：
// javascriptcn.com 代码示例
const ADD_TODO = 'ADD_TODO';
const addTodoAction = {
type: ADD_TODO,
payload: {
id: 1,
text: '学习 Redux',
completed: false
}
};Store
Store 是 Redux 中的一个对象，用于存储应用程序的状态。一个 Store 对象包含三个方法：dispatch、getState 和 subscribe。
- dispatch：用于发起一个 Action 对象到 Store 中。
- getState：用于获取当前 Store 中的状态对象。
- subscribe：用于监听 Store 中状态的变化，当 Store 中的状态发生变化时，监听函数会被触发。
Redux 中只能有一个 Store 对象，Store 对象是通过 createStore 方法来创建的。createStore 方法接受一个 Reducer 函数作为参数，用于处理 Action 对象并更新 Store 中的状态。
例如：
// javascriptcn.com 代码示例
import { createStore } from 'redux';
// 定义初始状态
const initialState = {
todos: []
};
// 定义 Reducer 函数
function todosReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [
...state.todos,
action.payload
]
};
default:
return state;
}
}
// 创建 Store 对象
const store = createStore(todosReducer);Reducer
Reducer 是 Redux 中的一个函数，用于处理 Action 对象并更新 Store 中的状态。
一个 Reducer 函数接受两个参数：state 和 action。state 表示当前 Store 中的状态对象，action 表示当前发起的 Action 对象。Reducer 函数返回一个新的状态对象，用于更新 Store 中的状态。
Reducer 函数的设计原则是“纯函数”，即一个函数的输出由其输入决定，不依赖于其它外部变量或状态。
例如：
// javascriptcn.com 代码示例
// 定义 Reducer 函数
function todosReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [
...state.todos,
action.payload
]
};
default:
return state;
}
}示例代码
在一个 TODO 应用程序中，我们可以使用 Redux 来管理状态。我们需要定义 ADD_TODO 和 COMPLETE_TODO 两个事件，使用 Action 和 Reducer 将事件发送到 Store 中，更新状态。
// javascriptcn.com 代码示例
import { createStore } from 'redux';
const initialState = {
todos: []
};
function todosReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [
...state.todos,
{
id: action.payload.id,
text: action.payload.text,
completed: false
}
]
};
case 'COMPLETE_TODO':
return {
...state,
todos: state.todos.map(todo => {
if (todo.id === action.payload) {
return {
...todo,
completed: true
};
}
return todo;
})
};
default:
return state;
}
}
const store = createStore(todosReducer);
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({
type: 'ADD_TODO',
payload: {
id: 1,
text: '学习 Redux'
}
});
store.dispatch({
type: 'COMPLETE_TODO',
payload: 1
});上述代码中，我们定义了 ADD_TODO 和 COMPLETE_TODO 两个事件，使用 Action 对象将事件发送到 Store 中，使用 Reducer 函数来处理事件并更新状态。
通过调用 createStore 方法创建一个 Store 对象，在 Store 对象上注册一个监听函数，来监听 Store 中状态的变化。
最后，我们用 dispatch 方法将事件发送到 Store 中，然后通过 getState 方法获取当前 Store 中的状态。
总结
在本文中，我们学习了 Redux 中的三个核心概念：Action、Store 和 Reducer。
Action 是 Redux 中用于描述事件的对象，包含 type 和 payload 两个属性。Store 是 Redux 中用于存储应用程序状态的对象，包含 dispatch、getState 和 subscribe 三个方法。Reducer 是 Redux 中用于处理 Action 对象并更新 Store 中的状态的函数。
Redux 的设计理念是“单向数据流”，使用 Redux 可以更好地管理应用程序的状态，使得应用程序更加可维护、可扩展。但是，Redux 也增加了代码的复杂度，需要深入学习才能更好地使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b38e77d4982a6ebd3a8f1