本篇文章给大家带来的内容是关于使用rxjs管理react应用状态的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
随着前端应用的复杂度越来越高，如何管理应用的数据已经是一个不可回避的问题。当你面对的是业务场景复杂、需求变动频繁、各种应用数据互相关联依赖的大型前端应用时，你会如何去管理应用的状态数据呢？
我们认为应用的数据大体上可以分为四类：
事件：瞬间产生的数据，数据被消费后立即销毁，不存储。异步：异步获取的数据；类似于事件，是瞬间数据，不存储。状态：随着时间空间变化的数据，始终会存储一个当前值/最新值。常量：固定不变的数据。rxjs天生就适合编写异步和基于事件的程序，那么状态数据用什么去管理呢？还是用rxjs吗？ 合不合适呢？
我们去调研和学习了前端社区已有的优秀的状态管理解决方案，也从一些大牛分享的关于用rxjs设计数据层的构想和实践中得到了启发：
使用rxjs完全可以实现诸如redux,mobx等管理状态数据的功能。应用的数据不是只有状态的，还有事件、异步、常量等等。如果整个应用都由observable来表达，则可以借助rxjs基于序列且可响应的的特性，以流的方式自由地拼接和组合各种类型的数据，能够更优雅更高效地抽象出可复用可扩展的业务模型。出于以上两点原因，最终决定基于rxjs来设计一套管理应用的状态的解决方案。
原理介绍
对于状态的定义，通常认为状态需要满足以下3个条件：
是一个具有多个值的集合。能够通过event或者action对值进行转换，从而得到新的值。有“当前值”的概念，对外一般只暴露当前值，即最新值。那么，rxjs适合用来管理状态数据吗？答案是肯定的！
首先，因为observable本身就是多个值的推送集合，所以第一个条件是满足的！
其次，我们可以实现一个使用dispatch action模式来推送数据的observable来满足第二个条件!
众所周知，rxjs中的observable可以分为两种类型：
cold observable: 推送值的生产者(producer)来自observable内部。
将会推送几个值以及推送什么样的值已在observable创建时被定义下来，不可改变。producer与观察者(observer) 是一对一的关系，即是单播的。每当有observer订阅时，producer都会把预先定义好的若干个值依次推送给observer。hot observable: 推送值的producer来自observable外部。
将会推送几个值、推送什么样的值以及何时推送在创建时都是未知的。producer与observer是一对多的关系，即是多播的。每当有observer订阅时,会将observer注册到观察者列表中，类似于其他库或语言中的addlistener的工作方式。当外部的producer被触发或执行时，会将值同时推送给所有的observer；也就是说，所有的observer共享了hot observable推送的值。rxjs提供的behaviorsubject就是一种特殊的hot observable，它向外暴露了推送数据的接口next函数；并且有“当前值”的概念，它保存了发送给observer的最新值，当有新的观察者订阅时，会立即从behaviorsubject那接收到“当前值”。
那么这说明使用behaviorsubject来更新状态并保存状态的当前值是可行的，第三个条件也满足了。
简单实现
请看以下的代码:
import { behaviorsubject } from 'rxjs';// 数据推送的生产者class statemachine {  constructor(subject, value) {    this.subject = subject;    this.value = value;  }  producer(action) {    let oldvalue = this.value;    let newvalue;    switch (action.type) {      case 'plus':        newvalue = ++oldvalue;        this.value = newvalue;        this.subject.next(newvalue);        break;      case 'todouble':        newvalue = oldvalue * 2;        this.value = newvalue;        this.subject.next(newvalue);        break;    }  }}const value = 1;  // 状态的初始值const count$ = new behaviorsubject(value);const statemachine = new statemachine(count$, value);// 派遣actionfunction dispatch(action) {  statemachine.producer(action);}count$.subscribe(val => {  console.log(val);});settimeout(() => {  dispatch({    type: plus  });}, 1000);settimeout(() => {  dispatch({    type: todouble  });}, 2000);
执行代码控制台会打印出三个值:
console 1 2 4
上面的代码简单实现了一个简单管理状态的例子:
状态的初始值: 1执行plus之后的状态值: 2执行todouble之后的状态值: 4实现方法挺简单的，就是使用behaviorsubject来表达状态的当前值：
第一步，通过调用dispatch函数使producer函数执行第二部，producer函数在内部调用了behaviorsubject的next函数，推送了新数据，behaviorsubject的当前值更新了，也就是状态更新了。不过写起来略微繁琐，我们对其进行了封装，优化后写法见下文。
使用操作符来创建状态数据我们自定义了一个操作符state用来创建一个能够通过dispatch action模式推送新数据的behaviorsubject，我们称她为stateobservable。
const count$ = state({  // 状态的唯一标识名称  name: count,      // 状态的默认值  defaultvalue: 1,      // 数据推送的生产者函数  producer(next, value, action) {    switch (action.type) {      case plus:        next(value + 1);        break;      case todouble:        next(value * 2);        break;    }  }});
更新状态在你想要的任意位置使用函数dispatch派遣action即可更新状态！
dispatch(count, {  type: plus})
异步数据rxjs的一大优势就在于能够统一同步和异步，使用observable处理数据你不需要关注同步还是异步。
下面的例子我们使用操作符from将promise转换为observable。
指定observable作为状态的初始值(首次推送数据)const todos$ = state({  name: todos,      // `observable`推送的数据将作为状态的初始值  initial: from(getasyncdata())      //...  });
producer推送observableconst todos$ = state({  name: todos,      defaultvalue: []      // 数据推送的生产者函数  producer(next, value, action) {    switch (action.type) {      case getasyncdata:        next(          from(getasyncdata())        );        break;    }  }});
执行getasyncdata之后，from(getasyncdata())的推送数据将成为状态的最新值。
衍生状态由于状态todos$是一个observable，所以可以很自然地使用rxjs操作符转换得到另一个新的observable。并且这个observable的推送来自todos$；也就是说只要todos$推送新数据，它也会推送；效果类似于vue的计算属性。
// 未完成任务数量const undonecount$ = todos$.pipe(  map(todos => {    let _conut = 0;    todos.foreach(item => {      if (!item.check) ++_conut;    });    return _conut;  }));
react视图渲染我们可能会在组件的生命周期内订阅observable得到数据渲染视图。
class todos extends react.component {  componentwillmount() {    todos$.subscribe(data => {      this.setstate({        todos: data      });    });  }}
我们可以再优化下，利用高阶组件封装一个装饰器函数@subscription，顾名思义，就是为react组件订阅observable以响应推送数据的变化；它会将observable推送的数据转换为react组件的props。
@subscription({  todos: todos$})class todolist extends react.component {  render() {    return (      <p classname="todolist">        <h1 classname="header">任务列表</h1>        {this.props.todos.map((item, n) => {          return <todoitem item={item} key={item.desc} />;        })}      </p>    );  }}
总结使用rxjs越久，越令人受益匪浅。
因为它基于observable序列提供了较高层次的抽象，并且是观察者模式，可以尽可能地减少各组件各模块之间的耦合度，大大减轻了定位bug和重构的负担。因为是基于observable序列来编写代码的，所以遇到复杂的业务场景，总能按照一定的顺序使用observable描述出来，代码的可读性很强。并且当需求变动时，我可能只需要调整下observable的顺序，或者加个操作符就行了。再也不必因为一个复杂的业务流程改动了，需要去改好几个地方的代码（而且还容易改出bug，笑～）。所以，以上基于rxjs的状态管理方案，对我们来说是一个必需品，因为我们项目中大量使用了rxjs，如果状态数据也是observable,对我们抽象可复用可扩展的业务模型是一个非常大的助力。当然了，如果你的项目中没有使用rxjs，也许redux和mobx是更合适的选择。
这套基于rxjs的状态管理方案，我们已经用于开发公司的商用项目，反馈还不错。所以我们决定把这套方案整理成一个js lib，取名为：floway，并在github上开源：
github源码：https://github.com/shayelee/floway使用文档：https://shayelee.github.io/floway【相关推荐：react视频教程】
以上就是使用rxjs管理react应用状态的介绍的详细内容。