前言
在前端开发中，Redux 是一个非常常用的状态管理工具。Redux Store 是 Redux 的核心概念之一，它负责管理整个应用的状态，并暴露出一些方法供开发者操作状态。在实际开发中，我们经常需要继承 Redux Store 以扩展其功能。然而，Redux Store 中的大部分方法都是实现逻辑，对于继承者来说不太友好，因此我们需要一种更加友好、易扩展的基础 Store。这就是为什么我们要使用 AbstractReduxStore。
什么是 AbstractReduxStore？
AbstractReduxStore 是一个轻量级的 JS 库，它是基于 Redux Store 实现的，提供了一种友好、易扩展的基础 Store，可以让开发者更好地继承 Store 并扩展其功能。
AbstractReduxStore 的优势
抽象方法：AbstractReduxStore 把所有的实现方法都变成了抽象方法，这样子类就可以直接使用这些方法，而不需要关心具体的实现逻辑，大大降低了子类的继承难度。
易扩展：AbstractReduxStore 提供了灵活的扩展方式，开发者可以通过扩展抽象方法或者属性来满足自己的业务需求。
更好的代码重用：开发者可以重用 AbstractReduxStore 中的方法，通过少量的代码，就可以实现自己的 Store。
可测试性：由于 AbstractReduxStore 中的方法都是抽象方法，便于开发者进行单元测试。
AbstractReduxStore 的使用
安装 AbstractReduxStore
在使用之前，需要先安装 AbstractReduxStore：
npm install abstract-redux-store
继承 AbstractReduxStore
首先，我们需要在自己的项目中定义一个继承于 AbstractReduxStore 的子类。
import AbstractReduxStore from 'abstract-redux-store';
class MyStore extends AbstractReduxStore {
constructor() {
super();
}
}如上所示，我们定义了一个名字为 MyStore 的子类，并继承了 AbstractReduxStore。
实现抽象方法
接下来，我们需要实现 AbstractReduxStore 中的抽象方法。所有的抽象方法都有明确的目的，每个目的都应该有对应的实现方法，例如：
-- -------------------- ---- -------
------ - --------- ------- ---------- - ---- --------
----- ------- ------- ------------------ -
------------- -
--------
-
--------- ---------------- ------- -
-- -- -------- --
-
--------- ------------------- -- -- ----- -
-- -- --------- --
-
--------- ---------- -
-- -- -------- --
-
--------- --------------------------- ---- -
-- -- -------------- --
-
--------- ------------------------------- ------------- -
-- -- --------------- --
-
--------- ----------------------------- ---- -
-- -- ---------------- --
-
-注意，所有的方法都是以 protected 的形式出现，因为它们是 AbstractReduxStore 的内部实现，子类应当继承并实现这些方法。
定义自己的属性和方法
除了实现 AbstractReduxStore 中的抽象方法，我们还可以定义自己的属性和方法，这也是 AbstractReduxStore 可扩展性的一部分。
-- -------------------- ---- -------
------ - --------- ------- ---------- - ---- --------
----- ------- ------- ------------------ -
------------- -
--------
------------ - --
-
--------- ---------------- ------- -
-- -- -------- --
-
--------- ------------------- -- -- ----- -
-- -- --------- --
-
--------- ---------- -
-- -- -------- --
-
--------- --------------------------- ---- -
-- -- -------------- --
-
--------- ------------------------------- ------------- -
-- -- --------------- --
-
--------- ----------------------------- ---- -
-- -- ---------------- --
-
------ ----------------- -
---------------
---------------
----- -------------------
-------- -
-------- -------------
--
---
-
------ ----------------- -
---------------
---------------
----- -------------------
-------- -
-------- -------------
--
---
-
-如上所示，我们在 MyStore 中定义了一个 counter 属性以及两个方法，分别实现了计数器的增加和减少操作，并进行了状态更新。
使用 MyStore
此时，我们就可以通过 MyStore 来管理我们的应用状态了。
-- -------------------- ---- ------- ------ ------- ---- ------------ ----- ------- - --- ---------- -------------------- -- - -------------------------------- --- -------------------------- -- - -------- - - -------------------------- -- - -------- - -
我们先定义了一个实例 myStore，并注册了一个监听器，每次 MyStore 的状态更新时，将会在控制台输出更新后的状态值。接下来，我们通过增加和减少计数器，来更新 MyStore 的状态。可以看到，MyStore 不仅可以实现多个方法的组合，而且状态更新十分方便。
总结
通过本文的介绍，我们了解了 AbstractReduxStore 的基本原理和优势，学习了如何通过继承 AbstractReduxStore 以及实现抽象方法来实现自己的 Store，并通过一个简单的示例来演示了 AbstractReduxStore 的使用方式。使用 AbstractReduxStore 可以大大提升 Redux Store 的扩展性和代码重用性，帮助开发者更好地管理应用状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645bea05968c7c53b0e3573d