随着前端技术的发展，现代前端开发不可避免地需要使用包管理工具来管理依赖。Npm 是其中一款使用最广泛的包管理工具。而在 Npm 上，有许多优秀的包可供使用，其中 redub 这个库是一款非常优秀的状态管理工具。下面就带大家来详细学习一下 redub 的使用方法。
redub 简介
redub 是一款轻量级的、快速的状态管理工具。它的设计灵感来源于 Redux ，但是相对 Redux 来说，redub 简单得多，使用更加容易上手。相信对于刚刚接触状态管理或者只想使用一个简单的状态管理工具的小伙伴而言，redub 绝对是一款不错的选择。
安装
在使用 redub 之前，我们需要先安装它。
npm install redub --save
需要注意的是，由于 redub 使用了 ES6 的语法，因此我们需要确保在项目中已经设置了 ES6 的编译环境，否则可能会报错。
使用方法
redub 的使用非常简便，下面我们就来了解一下最基础的使用方法。
定义 state
使用 redub 时，我们需要先来定义一个 state 对象：
const initState = {
count: 0,
list: [],
};上面的代码定义了一个初始状态，其中包含了两个属性，一个是 count ，初始值为 0，另一个是 list ，初始值是一个空数组。
定义 reducer
接下来，我们需要定义一个 reducer 函数，它负责根据传入的 action 来更新 state。关于 reducer 函数，我们知道，在 Redux 中它是必不可少的，而在 redub 中，也是如此。
-- -------------------- ---- -------
----- ------- - ------ - ---------- ------- -- -
------ ------------- -
---- ------
------ - --------- ------ ----------- - - --
---- ---------
--- ------- - ----------------
---------------------------- ---
------ - --------- ----- ------- --
--------
------ ------
-
--上面的代码定义了一个 reducer 函数，它接受两个参数，state 和 action，根据传入的 action 来更新 state。其中 ADD 动作会使 count 属性自增 1，DELETE 动作会删除 list 数组中指定索引位置的元素。
创建 Store
现在我们已经定义了初始状态和 reducer 函数。接下来，我们需要创建一个 Store 来管理状态。
import { createStore } from "redub";
const store = createStore(reducer);首先，我们需要从 redub 中导入 createStore ，然后调用它，传入我们的 reducer 函数即可创建一个 Store。Store 对象提供了一些方法，用于管理状态。
引用 state
现在我们已经创建了一个 Store 对象，接下来我们就可以引用 state ，并使用它了。
console.log(store.getState());
// 输出： { count: 0, list: [] }上面的代码使用了 store.getState() 方法来获取当前状态。输出是初始状态：{ count: 0, list: [] } 。
发送 Action
下面我们来看看如何发送一个 Action：
store.dispatch({ type: "ADD" });发送 Action 的方法非常简单，只需要调用 store.dispatch() 方法，传入一个描述动作的对象即可。上面代码中，我们向 Store 发送了一个 ACTION，动作类型是 ADD，这个动作将会使得 count 属性增加 1。
订阅 state
当状态发生改变时，通常我们需要对这些变化做出相应的反应，例如更新 UI 界面，redub 可以监听状态的改变。
store.subscribe(() => {
console.log(store.getState());
});使用 subscribe 方法订阅 Store 的状态变化，传入一个回调函数，每当状态发生变化时，这个回调函数就会被触发。上面的代码中，我们订阅了 Store 的状态变化，并且在状态发生变化时输出了新的状态。
示例代码
下面是一个简单的示例代码，可以帮助理解 redub 的使用方法：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- --------- - -
------ --
----- ---
--
----- ------- - ------ - ---------- ------- -- -
------ ------------- -
---- ------
------ - --------- ------ ----------- - - --
---- ---------
--- ------- - ----------------
---------------------------- ---
------ - --------- ----- ------- --
--------
------ ------
-
--
----- ----- - ---------------------
------------------ -- -
------------------------------
---
---------------- ----- ----- --- -- --- - ------ -- ----- -- -
---------------- ----- ----- --- -- --- - ------ -- ----- -- -
---------------- ----- ----- --- -- --- - ------ -- ----- -- -
---------------- ----- --------- ------ - --- -- --- - ------ -- ----- -- -总结
redub 是一款轻量级的状态管理工具，它可以帮助开发者轻松地管理应用的状态，而且非常易于使用。本篇文章介绍了 redub 的基础使用方法，并且提供了一个示例代码，希望能帮助到大家，为大家的前端学习之路提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8af6