在前端开发中，状态管理是一个非常重要的概念。Redux 是一个流行的状态管理库，它提供了一个可预测的状态管理体系，让状态的变化变得可控和可预测。在 Redux 中，有很多概念和 API，初学者很容易被淹没。简化 Redux 的概念和 API 就是 simple-redux 的目标。在本文中，我们将介绍如何使用 simple-redux。
安装 simple-redux
使用 simple-redux 首先需要将其安装到你的项目中。在终端中输入以下命令：
npm install simple-redux
这将在你的项目中安装 simple-redux。安装完成后，你可以通过 import 或 require 引用它。
创建 store
在 Redux 中，store 是保存应用程序状态的地方。simple-redux 使用 createStore 函数创建 store。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上面的代码中，我们首先引入了 createStore 函数。 createStore 函数接受一个 reducer 参数和一个 initialState 参数。在 reducer 函数中，我们将根据 action 的不同类型来更新 state。在初始化应用程序时，store 的 state 将被设置为 initialState。
可以看到，使用 simple-redux 创建 store 的方式与使用 Redux 几乎相同。
访问 state
使用 getState 可以获取 store 的当前状态：
console.log(store.getState()); //{ count: 0 }输出的结果是一个 JavaScript 对象，表示应用程序的当前状态。在这个例子中，我们可以看到 state 中有一个 count 属性，初始值为 0。
更新 state
在 Redux 中，store 的状态只能通过发出 action 来更新。简单地说，action 是一个简单的 JavaScript 对象，它表示对 store 进行的操作。
简单的 action 看起来像这样：
{
type: 'increment'
}在这个 action 中，我们只需要一个 type 属性，并且它的值是字符串 'increment'。这表示我们要对 store 中的 count 进行递增操作。
我们可以使用 dispatch 方法发出一个 action：
store.dispatch({ type: 'increment' });
console.log(store.getState()); // { count: 1 }在这个例子中，我们发出了一个递增的 action。通过调用 store.dispatch 方法，我们告诉 store 要执行递增操作。我们可以使用 getState 方法来访问递增后的状态，该方法返回的结果是一个包含一个 count 属性的对象。
我们还可以发出递减操作的 action：
store.dispatch({ type: 'decrement' });
console.log(store.getState()); // { count: 0 }在这个例子中，我们发出了一个递减的 action。通过调用 store.dispatch 方法，我们告诉 store 要执行递减操作。我们可以使用 getState 方法来访问递减后的状态，该方法返回的结果是一个包含一个 count 属性的对象。
监听状态变化
我们可以使用 subscribe 方法来监听 store 的状态变化。 subscribe 方法接受一个回调函数，该回调函数将在 store 的 state 发生变化时被调用。
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({ type: 'increment' }); // { count: 1 }
store.dispatch({ type: 'decrement' }); // { count: 0 }在调用 store.subscribe 方法后，当我们发出一个 action 时，getState 将返回新的状态，并将新状态传递给订阅的回调函数。
在这个例子中，我们首先订阅了 store 的状态变化。然后，我们发出了一个递增的 action。由于状态已经发生了变化，因此我们订阅的回调函数将被调用，并打印新的状态。接着，我们发出了一个递减的 action。这将再次导致我们订阅的回调函数被调用，并打印新的状态。
总结
simple-redux 是一个简化版的 Redux，它提供了一种更为简单和直接的方式来管理应用程序的状态。在本文中，我们介绍了如何在项目中安装和使用 simple-redux，以及如何创建和更新 store。我们还介绍了 store 的状态如何被访问和订阅，以及如何监听状态变化。希望本文能够为你学习 Redux 提供一些帮助。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
------------------------------ -- - ------ - -
------------------ -- -
------------------------------
---
---------------- ----- ----------- --- -- - ------ - -
---------------- ----- ----------- --- -- - ------ - -来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551f381e8991b448cf744