Redux 是一个 JavaScript 应用程序的状态管理库，它可以帮助我们更好地管理应用程序的状态，并且使得状态更加可预测。Redux 的核心概念包括 store、actions 和 reducers。在本文中，我们将详细介绍这些概念，并提供一些示例代码来帮助读者更好地理解它们。
Store
Store 是 Redux 的核心概念之一。它是一个保存应用程序状态的对象，可以通过 Redux 提供的 API 进行访问和修改。Store 中保存的状态是一个不可变的对象，这意味着我们不能直接修改它，而是需要通过 dispatch action 的方式来修改它。
在 Redux 中，我们可以通过 createStore 方法来创建一个 store。createStore 方法接受一个 reducer 函数作为参数，并返回一个新的 store 对象。下面是一个示例代码：
import { createStore } from 'redux';
function reducer(state = { count: 0 }, 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);在上面的代码中，我们定义了一个 reducer 函数，它接受两个参数：state 和 action。state 是当前的状态，action 是一个包含 type 属性的对象，用于描述要执行的操作。在 reducer 函数中，我们根据 action 的类型来更新状态，并返回一个新的状态对象。
然后，我们使用 createStore 方法创建了一个新的 store 对象，并将 reducer 函数作为参数传递给它。这个新的 store 对象就是我们应用程序的状态管理中心。
Actions
Actions 是 Redux 中另一个核心概念。它们是描述应用程序状态变化的对象。每个 action 都必须有一个 type 属性，用于描述要执行的操作。除了 type 属性之外，action 可以包含任意其他属性，用于描述这个操作的具体细节。
在 Redux 中，我们可以通过 dispatch 方法来分发一个 action。dispatch 方法接受一个 action 对象作为参数，并将它发送给 reducer 函数。Reducer 函数会根据 action 的类型来更新状态，并返回一个新的状态对象。
下面是一个简单的示例代码：
store.dispatch({ type: 'INCREMENT' });在上面的代码中，我们使用 store 的 dispatch 方法分发了一个名为 INCREMENT 的 action。这个 action 表示要将计数器加 1。当 reducer 函数接收到这个 action 后，它会根据 action 的类型来更新状态，并返回一个新的状态对象。
Reducers
Reducers 是 Redux 中的另一个核心概念。它们是纯函数，用于根据 action 的类型来更新状态，并返回一个新的状态对象。Reducer 函数接受两个参数：当前的状态和要执行的 action。
在 Redux 中，我们需要编写一个或多个 reducer 函数来管理应用程序的状态。每个 reducer 函数都应该只管理应用程序状态的一部分。这样做的好处是，可以将应用程序状态分解为多个小的部分，从而更容易管理和维护。
下面是一个简单的示例代码：
function reducer(state = { count: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}在上面的代码中，我们定义了一个 reducer 函数，它接受两个参数：当前的状态和要执行的 action。在 reducer 函数中，我们根据 action 的类型来更新状态，并返回一个新的状态对象。
总结
在本文中，我们介绍了 Redux 中的 store、actions 和 reducers 这三个核心概念。我们详细地讲解了它们的作用和使用方法，并提供了一些示例代码来帮助读者更好地理解它们。
Redux 是一个非常强大的状态管理库，可以帮助我们更好地管理应用程序的状态，并且使得状态更加可预测。掌握 Redux 中的 store、actions 和 reducers 这三个核心概念对于学习 Redux 和构建复杂的应用程序非常重要。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6588dc1eeb4cecbf2de003c6