Redux 是一种用于管理 JavaScript 应用程序状态的库，它提供了可预测性和可测试性。在本文中，我们将探讨如何使用 npm 包来安装和使用 Redux。
安装 Redux
要开始使用 Redux，我们需要先安装它。我们可以使用 npm 包管理器来安装 Redux。
npm install redux --save
这将安装最新版本的 Redux 并将其添加到 package.json 文件中的依赖项中。
创建 Reducer
Reducer 是 Redux 库的核心之一。它是一个函数，接收当前应用程序状态和操作，并返回更新后的状态。
以下是一个简单的示例 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-上面的代码定义了一个名为 counterReducer 的函数。当调用动作类型为 INCREMENT 或 DECREMENT 时，该函数会相应地更改计数器的值。
创建 Store
Store 就像一个容器，用于存储 Redux 应用程序的状态。它还负责调度 reducer 来处理操作并更新状态。
以下是创建 store 的示例代码：
import { createStore } from "redux";
import counterReducer from "./reducers/counterReducer";
const store = createStore(counterReducer);上面的代码使用 createStore 函数从 counterReducer 创建了一个新的 store。
更新状态
要更新 Redux 应用程序的状态，我们需要 dispatch 一个 action。Action 是一个包含操作类型和数据负载的 JavaScript 对象。
以下是一个简单的示例：
store.dispatch({ type: "INCREMENT" });当调用此代码时，store 将调用 counterReducer 并将当前状态传递给它。Reducer 将检查操作类型，并更改状态。最后，store 将更新状态并通知任何已注册的订阅者。
访问状态
要访问 Redux 应用程序的状态，我们可以使用 getState 函数。它返回存储在 store 中的当前状态。
以下是如何使用 getState 函数：
console.log(store.getState().count);
上面的代码将输出当前计数器的值。
订阅状态更新
要在状态更改时获取通知，我们可以注册一个 store 订阅者。每当 store 的状态发生更改时，订阅者函数都会被调用。这使得我们可以执行任何必要的操作以响应应用程序状态的更改。
以下是如何注册订阅者的示例：
store.subscribe(() => {
console.log("Current count:", store.getState().count);
});上面的代码将在每次状态更改时输出当前计数器的值。
总结
在本文中，我们介绍了如何使用 npm 包来安装和使用 Redux。我们还学习了如何创建 reducer、store，以及如何更新状态并访问它们。此外，我们还了解了如何注册 store 订阅者以便在状态更改时获取通知。Redux 是一种强大的库，可用于管理复杂的应用程序状态。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32199