简介
Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它被广泛使用，尤其是在 React 应用程序中，以帮助开发人员更好地管理应用程序的状态。Redux 是一个强大的工具，但对初学者来说可能会感到有些困难。本文旨在探讨 Redux 的核心概念，以帮助初学者快速掌握 Redux 的使用以及如何将其应用到自己的应用程序中。
Redux 的核心概念
Redux 的核心概念包括：
Store
Store 是应用程序的状态仓库。它包含了应用程序的状态，并提供一个用于更新状态的接口。要创建一个 Store，需要调用 Redux 的 createStore() 函数并将 Reducer 作为参数。例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - ----------------------------在这个例子中，我们创建了一个 Store，并将 Reducer 传递给 createStore() 函数。我们还为 Store 提供了一个初始状态，这个状态只包含一个名为 count 的属性，它的值为 0。
Reducer
Reducer 是一个纯函数，它接收当前状态和一个 action 对象，并返回一个新的状态。Reducer 没有副作用，也不会改变原来的状态，而是返回一个全新的状态。
-- -------------------- ---- -------
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-在上述代码中，我们定义了一个 Reducer 函数，它接收一个名为 state 的参数，并返回一个全新的 state。这个 Reducer 只有两个 action：INCREMENT 和 DECREMENT。当接收到 INCREMENT action 时，它会将 count 加一；当接收到 DECREMENT action 时，它会将 count 减一；对于其他 action，它将返回原来的 state。
Action
Action 是一个包含 type 属性的对象，用于描述发生了什么。当用户执行某个操作时，可以创建一个 Action 对象，并将其分派到 Store 中。Redux 的 Action 是一个纯 JavaScript 对象，其中 type 属性是必须的。例如：
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };Dispatcher
Dispatcher 是一个函数，它接收一个 Action 对象，并将该 Action 对象分派到 Store 中。在 Redux 中，更常见的是使用 Action Creator 来创建 Action 对象。Action Creator 是一个返回 Action 对象的函数。例如：
function increment() {
return { type: 'INCREMENT' };
}
function decrement() {
return { type: 'DECREMENT' };
}在这个例子中，我们定义了两个 Action Creator：increment 和 decrement。这些函数返回的对象会被传递到 Dispatcher 中，最终会被分派到 Store 中。
Subscriber
Subscriber 是一个函数，它可以监听 Store 中状态的变化，并在状态变化时触发相应的操作。要监听 Store 中状态的变化，我们可以使用 Store 对象提供的 subscribe() 方法。例如：
function handleStoreChange() {
console.log(store.getState());
}
store.subscribe(handleStoreChange);在这个例子中，我们定义了一个函数 handleStoreChange，该函数将在 Store 中状态发生变化时被调用。我们将这个函数注册到 Store 中，以使它能够监听 Store 中状态的变化。
Redux 的使用
在了解完 Redux 的核心概念后，我们要将这些概念用于实际的应用程序中。以下是一个简单的应用程序，它使用 Redux 来管理计数器的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- ------------
-------- ----- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
-------- ----------------- -
----------------------
-
-------- ----------------- -
----------------------
-
------ -
-----
---------- ------------
------- ------------------------------------
------- ------------------------------------
------
--
-
------ ------- ----在这个例子中，我们使用了 Redux 提供的一些工具，包括 useSelector、useDispatch 以及我们自己定义的 increment 和 decrement Action Creator。
使用 useSelector
useSelector 是一个 React Hooks，它用于选择 Store 中的状态。在上述代码中，我们使用了 useSelector 来选择 Store 中的 count 状态。useSelector 接收一个函数作为参数，该函数应该返回要选择的状态。
const count = useSelector((state) => state.count);
在这个例子中，我们传递了一个函数，该函数从 Store 中选择了 count 状态。
使用 useDispatch
useDispatch 是一个 React Hooks，它用于分派 Action 对象。在上述代码中，我们使用了 useDispatch 来分派 increment 和 decrement Action。
-- -------------------- ---- ------- ----- -------- - -------------- -------- ----------------- - ---------------------- - -------- ----------------- - ---------------------- -
在这个例子中，我们首先调用 useDispatch，以获取一个 dispatch 函数。然后我们定义了两个函数来分派 Action，这些 Action 是通过 increment 和 decrement Action Creator 创建的。
创建 Action Creator
我们创建了两个 Action Creator 函数 ：increment 和 decrement。这些函数分别创建一个 type 为 INCREMENT 或 DECREMENT 的 Action 对象。
export function increment() {
return { type: 'INCREMENT' };
}
export function decrement() {
return { type: 'DECREMENT' };
}结论
Redux 是一个非常强大的状态管理工具。在本文中，我们探讨了 Redux 的核心概念，并介绍了如何将 Redux 应用于实际的应用程序中。这些概念包括 Store、Reducer、Action、Dispatcher 以及 Subscriber。我们还通过一个简单的应用程序示例展示了 Redux 的使用。希望这篇文章能够帮助读者更好地理解 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672db742eedcc8a97c85b986