前言
Redux 是一种用于 JavaScript 应用程序的可预测状态容器。它可以帮助我们管理应用程序的状态，并且是 React 生态系统中最流行的状态管理库。在这篇文章中，我们将介绍 Redux 核心概念，包括状态、行为、reducer、store 和 action，以及如何在应用程序中使用 Redux。
状态
在 Redux 中，状态是应用程序中可以直接操作的所有数据的统称。它们以 JavaScript 对象的形式存储在 Redux store 中。例如，一个电子商务应用程序的状态可能包括以下内容：
// javascriptcn.com 代码示例
{
products: [
{ id: 1, name: 'iPhone', price: 999 },
{ id: 2, name: 'iPad', price: 799 },
{ id: 3, name: 'MacBook', price: 1299 },
],
cart: [
{ productId: 1, quantity: 2 },
{ productId: 3, quantity: 1 },
],
}行为
在 Redux 中，行为是一种描述应用程序状态更改的方式。它们以 JavaScript 对象的形式表示，并包含一个类型属性和一个可选的负载属性。例如，如果我们要添加一个商品到购物车中，我们可以这样定义一个行为：
{
type: 'ADD_TO_CART',
payload: { productId: 2, quantity: 1 },
}Reducer
在 Redux 中，reducer 是一种纯函数，它接受当前状态和行为，并返回一个新状态。它的目的是在状态更改时更新应用程序的状态。例如，如果我们要处理上面的 ADD_TO_CART 行为，我们可以编写以下 reducer：
function cartReducer(state = [], action) {
switch (action.type) {
case 'ADD_TO_CART':
return [...state, action.payload]
default:
return state
}
}这个 reducer 接受一个名为 state 的数组和一个名为 action 的行为对象作为参数，并返回一个新的数组，该数组包含所有现有的购物车项以及新的商品。如果行为类型不是 ADD_TO_CART，则返回当前状态。
Store
在 Redux 中，store 是一个保存应用程序状态的容器。它的主要作用是管理应用程序状态的更新，并在发生变化时通知已注册监听器。我们可以使用 Redux createStore() 函数来创建一个新的 store：
import { createStore } from 'redux'
import cartReducer from './reducers/cartReducer'
const store = createStore(cartReducer)这个 store 表示我们的购物车应用程序状态。我们可以使用 store.getState() 方法来获取当前状态：
console.log(store.getState()) // []
我们也可以使用 store.dispatch() 方法来分派一个行为：
store.dispatch({
type: 'ADD_TO_CART',
payload: { productId: 2, quantity: 1 },
})
console.log(store.getState()) // [{ productId: 2, quantity: 1 }]最后，我们可以使用 store.subscribe() 方法来注册一个监听器，以便在状态更改时获取通知：
store.subscribe(() => {
console.log(store.getState())
})Action
在 Redux 中，action 是对状态进行更改的唯一方法。它们是一种描述应用程序状态更改的方式，并被分派到 store 中。例如，如果我们要添加一个商品到购物车中，我们可以这样定义一个行为：
{
type: 'ADD_TO_CART',
payload: { productId: 2, quantity: 1 },
}总结
Redux 是一种用于 JavaScript 应用程序的状态管理库。在 Redux 中，状态是应用程序中可以直接操作的所有数据的统称，行为是一种描述应用程序状态更改的方式，reducer 是一种纯函数，它接受当前状态和行为，并返回一个新状态，store 是一个保存应用程序状态的容器，它的主要作用是管理应用程序状态的更新，并在发生变化时通知已注册监听器，action 是对状态进行更改的唯一方法。
我们可以使用 Redux 来管理应用程序的状态，使得应用程序的状态更加可预测和易于维护。如果你想了解更多关于 Redux 的内容，可以参考 Redux 官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533a4ec7d4982a6eb73327a