Redux 是一款非常流行的 JavaScript 状态管理库，它可以帮助开发者更好地管理应用的状态。在本文中，我们将从零开始构建一款 Redux 应用，包括 Redux 的核心概念和使用方法。
Redux 的核心概念
在使用 Redux 之前，我们需要了解一些核心概念。
Action
Action 是一个 JavaScript 对象，它描述了一个操作的类型和数据。例如，我们可以创建一个增加计数器的 Action：
const incrementAction = {
type: 'INCREMENT',
payload: 1
}这个 Action 描述了一个类型为 INCREMENT 的操作，它的数据是 1。
Reducer
Reducer 是一个纯函数，它接收一个当前状态和一个 Action，返回一个新的状态。例如，我们可以创建一个简单的计数器 Reducer：
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --------------
---- ------------
------ ----- - --------------
--------
------ -----
-
-这个 Reducer 接收一个当前状态和一个 Action，根据不同的 Action 类型返回一个新的状态。
Store
Store 是一个包含状态和 Reducer 的对象，它提供了一些方法来更新状态和订阅状态的变化。例如，我们可以创建一个简单的 Store：
import { createStore } from 'redux'
const store = createStore(counterReducer)这个 Store 包含了我们之前创建的计数器 Reducer。
Action Creator
Action Creator 是一个函数，它返回一个 Action。例如，我们可以创建一个增加计数器的 Action Creator：
function increment(amount) {
return {
type: 'INCREMENT',
payload: amount
}
}这个 Action Creator 接收一个参数 amount，返回一个类型为 INCREMENT，数据为 amount 的 Action。
构建一个简单的 Redux 应用
现在我们已经了解了 Redux 的核心概念，我们可以开始构建一个简单的 Redux 应用。我们的应用将包含一个计数器，用户可以增加或减少计数器的值。
安装 Redux
我们首先需要安装 Redux：
npm install redux
创建 Reducer
我们可以创建一个简单的计数器 Reducer：
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --------------
---- ------------
------ ----- - --------------
--------
------ -----
-
-这个 Reducer 接收一个当前状态和一个 Action，根据不同的 Action 类型返回一个新的状态。
创建 Store
我们可以创建一个简单的 Store：
import { createStore } from 'redux'
const store = createStore(counterReducer)这个 Store 包含了我们之前创建的计数器 Reducer。
创建 Action Creator
我们可以创建一个增加计数器的 Action Creator：
function increment(amount) {
return {
type: 'INCREMENT',
payload: amount
}
}这个 Action Creator 接收一个参数 amount，返回一个类型为 INCREMENT，数据为 amount 的 Action。
我们也可以创建一个减少计数器的 Action Creator：
function decrement(amount) {
return {
type: 'DECREMENT',
payload: amount
}
}这个 Action Creator 接收一个参数 amount，返回一个类型为 DECREMENT，数据为 amount 的 Action。
更新状态
我们可以使用 Store 的 dispatch 方法来更新状态。例如，我们可以增加计数器的值：
store.dispatch(increment(1))
这个代码会将一个类型为 INCREMENT，数据为 1 的 Action 发送到 Store，Store 会根据我们之前创建的计数器 Reducer 返回一个新的状态。
订阅状态变化
我们可以使用 Store 的 subscribe 方法来订阅状态变化。例如，我们可以在状态变化时打印计数器的值：
store.subscribe(() => {
console.log(store.getState())
})这个代码会在状态变化时打印当前的状态。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --------------
---- ------------
------ ----- - --------------
--------
------ -----
-
-
-------- ----------------- -
------ -
----- ------------
-------- ------
-
-
-------- ----------------- -
------ -
----- ------------
-------- ------
-
-
----- ----- - ---------------------------
------------------ -- -
-----------------------------
--
----------------------------
----------------------------
----------------------------这个代码会打印以下内容：
1 3 2
结论
在本文中，我们介绍了 Redux 的核心概念和使用方法，并构建了一个简单的 Redux 应用。Redux 是一个非常强大的状态管理库，可以帮助开发者更好地管理应用的状态。如果你想深入学习 Redux，建议阅读 Redux 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67610bef03c3aa6a560898df