运用RxJS治理React运用状况的实践分享

2024年5月2日 247次阅读 来源: shayeLee

跟着前端运用的庞杂度越来越高，怎样治理运用的数据已是一个不可逃避的题目。当你面临的是
营业场景庞杂、需求更改频仍、种种运用数据相互关联依靠的大型前端运用时，你会怎样去治理运用的状况数据呢？

我们以为运用的数据大体上可以分为四类：

  • 事宜：霎时发生的数据，数据被消耗后马上烧毁，不存储。
  • 异步：异步猎取的数据；类似于事宜，是霎时数据，不存储。
  • 状况：跟着时候空间变化的数据，一直会存储一个当前值/最新值。
  • 常量：牢固稳定的数据。

RxJS天生就适宜编写异步和基于事宜的递次，那末状况数据用什么去治理呢？照样用RxJS吗？ 合不适宜呢？

我们去调研和进修了前端社区已有的优异的状况治理解决计划，也从一些大牛分享的关于用RxJS设想数据层的设想和实践中获得了启示：

  1. 运用RxJS完全可以完成诸如Redux,Mobx等治理状况数据的功用。
  2. 运用的数据不是只需状况的，另有事宜、异步、常量等等。假如全部运用都由observable来表达，则可以借助RxJS基于序列且可相应的的特征，以流的体式格局自由地拼接和组合种种范例的数据，可以更文雅更高效地笼统出可复用可扩大的营业模子。

出于以上两点缘由，终究决议基于RxJS来设想一套治理运用的状况的解决计划。

道理引见

关于状况的定义，平常以为状况须要满足以下3个前提：

  1. 是一个具有多个值的鸠合。
  2. 可以经由过程event或许action对值举行转换，从而获得新的值。
  3. 有“当前值”的观点，对外平常只暴露当前值，即最新值。

那末，RxJS适宜用来治理状况数据吗？答案是肯定的！

起首，因为Observable自身就是多个值的推送鸠合，所以第一个前提是满足的！

其次，我们可以完成一个运用dispatch action形式来推送数据的observable来满足第二个前提!

尽人皆知，RxJS中的observable可以分为两种范例：

  1. cold observable: 推送值的生产者(producer)来自observable内部。

    • 将会推送几个值以及推送什么样的值已在observable建立时被定义下来，不可转变。
    • producer与观察者(observer) 是一对一的关联，等于单播的。
    • 每当有observer定阅时，producer都会把预先定义好的若干个值顺次推送给observer。

  2. 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);

// 调派action
function 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推送observable

const 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 (
      <div className="todolist">
        <h1 className="header">使命列表</h1>
        {this.props.todos.map((item, n) => {
          return <TodoItem item={item} key={item.desc} />;
        })}
      </div>
    );
  }
}

总结

运用RxJS越久，越使人受益不浅。

  • 因为它基于observable序列供应了较高条理的笼统，而且是观察者形式，可以尽量地削减各组件各模块之间的耦合度，大大减轻了定位BUG和重构的累赘。
  • 因为是基于observable序列来编写代码的，所以碰到庞杂的营业场景，总能根据肯定的递次运用observable形貌出来，代码的可读性很强。而且当需求更改时，我能够只须要调解下observable的递次，或许加个操作符就好了。不再必因为一个庞杂的营业流程改动了，须要去改好几个处所的代码（而且还轻易改出BUG，笑～）。

所以，以上基于RxJS的状况治理计划，对我们来说是一个必需品，因为我们项目中大批运用了RxJS，假如状况数据也是observable,对我们笼统可复用可扩大的营业模子是一个非常大的助力。固然了，假如你的项目中没有运用RxJS，或许Redux和Mobx是更适宜的挑选。

这套基于RxJS的状况治理计划，我们已用于开发公司的商用项目，反应还不错。所以我们决议把这套计划整理成一个js lib，取名为：Floway，并在github上开源：

迎接人人star，更迎接人人来配合交换和分享RxJS的运用心得！

参考文章：

    原文作者：shayeLee
    原文地址: https://segmentfault.com/a/1190000018743793
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞