一种基于RXJS的适用于vuejs和reactjs框架的状态管理库的制作方法

一种基于rxjs的适用于vuejs和reactjs框架的状态管理库
技术领域
1.本发明涉及一种状态管理库，涉及电子系统技术领域，特别是涉及一种基 于rxjs的适用于vuejs和reactjs框架的状态管理库。


背景技术：

2.状态管理库是一个面向javascript应用的状态容器，提供可预测化的状态 管理。它将web应用作为一个状态机，使得视图与状态是一一对应的；并将所 有的状态，保存在对象之中。本发明在现有的状态管理库的理论基础上，使用 rxjs编程库作为开发框架，实现了一种同时适用于vuejs和reactjs的响应式 状态管理库，将系统整体调用运行的轻量化、精确性和灵活性最优作为该状态 管理库实现的目标。目前主流的前端框架主要有vuejs、reactjs以及angularjs。 它们都有属于自己生态系统内或者开源社区贡献的优秀状态管理工具：例如 reactjs中最广泛使用的状态管理工具redux，其遵循单向数据流、单一数据源 思想，且对角色精细分配，行为单一逻辑严谨。其缺点是样板代码 (boilerplatecode)数量大，尤其是reducer，在复杂场景中需要写大量的 switch，可读性差维护难度大，要理解一个状态机往往需要配合好几个代码文 件；redux默认只支持同步数据流，提供中间件机制让开发者自己定制异步数据 流，社区中的解决方案复杂度不一，复杂业务场景下的解决方案比如redux-saga 的复杂度更是高出几个量级。并且状态更新的开销极大，一个state改变，则 会自顶向下逐层读，全部订阅store的组件都会收到更新通知，产生不必要的 全局强制性更新，recoil是react流行的一种状态管理库，概念用法都比redux 简单很多。在recoil中，将每一个最小的状态单位(即无法从其他状态计算得 出)定义为一个atom，其通过全新的atom概念来实现分散式的、更细粒度化的 状态管理，通过状态生成派生值。依托sharedstate使得受影响的组件能够独 立渲染，利用组件隐式订阅来实现响应式的、对订阅某个atom的组件进行精确 地按需渲染，支持时间回溯。mobx是一个基于函数响应式编程的状态管理解决 方案，遵循单向数据流、多数据源原则。mobx的优点是没有redux和vuex中繁 杂的概念，样板代码的数量相对前述二者来说很小，代码可读性和可维护性高； 且真正实现按需更新。此外，虽然mobx是基于函数式响应式编程，但它的api 设计非常适合面向对象编程；且以reactions作为响应式编程与命令式编程的 桥梁，拥有更舒适的范式代码书写体验。然而其缺点是没有规范store的组织 模式，非常不利于调试与协作，且无法支持时间回溯。针对现有技术存在以下 问题：
3.现有技术中，存在现有的状态管理库在使用过程中，无法对状态变化进行 记录，导致状态回退和前进变换太过困难的问题。


技术实现要素：

4.本发明需要解决的技术问题是提供一种基于rxjs的适用于vuejs和 reactjs框架的状态管理库，其中一种目的是为了具备前进和回退操作、状态流 创建、状态更新，解决现有的状态管理库在使用过程中，无法对状态变化进行 记录，导致状态回退和前进变换太过
困难的问题。
5.为解决上述技术问题，本发明所采用的技术方案是：
6.一种基于rxjs的适用于vuejs和reactjs框架的状态管理库，包括以下步 骤：
7.步骤一：初始化；
8.步骤二：使用combinelatest操作符订阅各个流的状态变化；
9.步骤三：前进和回退操作；
10.步骤四：状态流创建；
11.步骤五：状态更新。
12.本发明技术方案的进一步改进在于：所述初始化获取状态图里面所有设置 了支持状态前进和回退操作的状态流数组。对状态流数组中的每个状态流订阅 当状态变化时记录每个流的状态值事件。
13.状态流：behaviorsubject流对象，用于控制每个单一状态的更新。
14.状态图：用于存储每个状态流的映射，键为状态流名称，值为rxjs的 behaviorsubject对象流。
15.当前状态集：链表结构，记录了状态变化时各个时刻的状态图，方便状态 回退和前进操作。
16.采用上述技术方案，该方案中的利用rxjs函数响应式编程思想，使得状态 管理变得精简、易于扩展且无副作用，任何从web应用中获取的状态都能够被 观测并自动触发和衍生，通过observable模式实现局部精确更新，免去了粒度 控制困扰，同时对复杂的异步操作拥有良好支持，并对vuejs和reactjs提供 风格一致的接口调用，使系统整体运行效率得到优化。
17.本发明技术方案的进一步改进在于：所述使用combinelatest操作符订阅 各个流的状态变化，新构造一个状态图，当任意一个状态流的值更新时，收集 当前所有的状态流的最新值，将其填充进状态图中，将状态集链表的指针指向 新构造的状态图。
18.本发明技术方案的进一步改进在于：所述前进和回退操作，提供了gopast 和goprev两个函数来移动状态集链表的指针，进行状态前进和回退操作。
19.本发明技术方案的进一步改进在于：所述状态流创建，通过定义一个 createatomstate函数，该函数接收状态流名称、初始状态值、是否支持前进和 回退操作为参数，在函数内部创建一个behaviorsubject流对象。
20.本发明技术方案的进一步改进在于：所述状态更新，通过定义一个 useobservable函数，该函数接收handler函数、状态初始值作为参数，通过 handler函数创建新的流，然后对其订阅状态更新事件，在react框架中，通过 使用setstate来更新状态，在vue中通过修改ref变量的值来更新状态。
21.采用上述技术方案，该方案中的vuejs的官方状态管理工具vuex，它是针 对vue的一种特异化的flux，保留了单向数据流、单一数据源的核心概念，同 时吸取了部分redux的理念，采用集中式存储管理应用的所有组件的状态，并 以相应的规则保证状态以一种可预测的方式发生变化，即将数据存放到全局的 store，再将store挂载到每个vue实例组件中，利用vue.js的细粒度数据响 应机制来进行高效的状态更新。与flux/redux相比，vuex是更加全面地状态管 理解决方案，提供了异步操作支持。
handler函数创建新的流，然后对其订阅状态更新事件，在react框架中，通 过使用setstate来更新状态，在vue中通过修改ref变量的值来更新状态， vuejs的官方状态管理工具vuex，它是针对vue的一种特异化的flux，保留 了单向数据流、单一数据源的核心概念，同时吸取了部分redux的理念，采 用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种 可预测的方式发生变化，即将数据存放到全局的store，再将store挂载到每 个vue实例组件中，利用vue.js的细粒度数据响应机制来进行高效的状态更 新。与flux/redux相比，vuex是更加全面地状态管理解决方案，提供了异步 操作支持，与现有技术相比，本发明提出的技术方案中提供的状态管理方法 借鉴了redux和recoil两个库，基于rxjs框架实现了单向数据流、单一数 据源思想，行为单一逻辑严谨，同时不需要大量的模板代码的，本方案的亮 点在于状态的时间回溯功能，该功能基于不可变数据结构以及链表实现了状 态的回退和前进操作，在功能实现上减少了bug产生的可能性，在用户体验 上，通过gopast和gonext两个函数的调用即可实现状态的回退和前进操作， 极大降低了用户在使用本框架时的心智负担。
35.下面具体说一下该基于rxjs的适用于vuejs和reactjs框架的状态管理库 的工作原理。
36.如图1所示，初始化获取状态图里面所有设置了支持状态前进和回退操作 的状态流数组，对状态流数组中的每个状态流订阅当状态变化时记录每个流的 状态值事件，状态流：behaviorsubject流对象，用于控制每个单一状态的更新， 状态图：用于存储每个状态流的映射，键为状态流名称，值为rxjs的 behaviorsubject对象流，当前状态集：链表结构，记录了状态变化时各个时刻 的状态图，方便状态回退和前进操作，使用combinelatest操作符订阅各个流 的状态变化，新构造一个状态图，当任意一个状态流的值更新时，收集当前所 有的状态流的最新值，将其填充进状态图中，将状态集链表的指针指向新构造 的状态图，前进和回退操作，提供了gopast和goprev两个函数来移动状态集 链表的指针，进行状态前进和回退操作，状态流创建，通过定义一个 createatomstate函数，该函数接收状态流名称、初始状态值、是否支持前进和 回退操作为参数，在函数内部创建一个behaviorsubject流对象。
37.上文一般性的对本发明做了详尽的描述，但在本发明基础上，可以对之做 一些修改或改进，这对于技术领域的一般技术人员是显而易见的。因此，在不 脱离本发明思想精神的修改或改进，均在本发明的保护范围之内。