gent-react

> A `React plugin` to use `gent-store` and `gent-hub`.

Usage no npm install needed!

<script type="module">
  import gentReact from 'https://cdn.skypack.dev/gent-react';
</script>

README

gent-react

A simple React Tool to use with gent-store and rxjs

安装

npm i gent-react gent-store -S

使用

第一步:初始化一个绑定函数,并在入口组件通过属性传递。

// libs/bind-gent.js
import {bindGentReact} from 'gent-react';
import store from '../data/stores/main';

const bindGent = bindGentReact({
  // store 实例
  store,

  // 绑定store的名字,有命名冲突时使用
  storeKey: '$store',

  // 绑定订阅空间的名字,有命名冲突时使用
  subscriptionsKey: '$subs'
});

export default bindGent;

第二步:在根组件Appconstructor方法调用绑定函数,并监听store变化。

import React from 'react';
import ReactDOM from 'react-dom';
import bindGent from '../lib/bind-gent';

class App extends React.Component{
  constructor(props) {
    super(props);

    this.state = {};

    // 调用绑定函数
    bindGent(this);
    // 监听store,有变化是重新渲染根组件
    this.$subs.store = this.$store.subscribe(
      state => this.setState({})
    );
  }
}

第三步:在自己类使用绑定的store等属性。

每个组件调用绑定函数后,这个组件实例会有如下属性:

  • this.$store: Store实例(opts.storeKey)。
  • this.$subs: 用来绑定订阅,组件内新建订阅的时候最好绑定在这上面,组件离开时会取消这些订阅。
    例:this.$subs.addUser = this.$hub.from([1]).subscribe(data => {})
  • this.$unsubscribe(key): 取消一个绑定在this.$subs上的订阅,不传key则取消所有订阅。 组件离开时(componentWillUnMount),会调用this.$unsubscribe(),从而清楚所有绑定在this.$subs上的订阅。
import React from 'react';
import bindGent from '../lib/bind-gent';

class Page extends React.Component {
  constructor(props) {
    super(props, true);

    // bind gent
    bindGent(this);

    // init state
    this.state = {
      //
    };
  }

  render () {
    // 获取全局数据
    let data = this.$sotre.getState();

    //...
  }

  // action: add user
  addUser() {
    // 放弃上次订阅,如果有
    this.$unsubscribe('addItem');

    let user = {
      id: Date.now(),
      name: 'user-' + Math.round(Math.random() * 1000000),
    };

    // 定义流
    let observable = of(user);
    // 服务器请求
    observable = observable.pipe(
      switchMap(v => {
        from(API.userAdd(v)); // 将promise转为observable
      })
    );
    // 提交store变更
    observable = observable.pipe(
      map(user => {
        this.$store.commit('user.add', user);
      })
    )

    // 订阅,开始一个数据流
    NProgress.start();
    this.$subs.addItem = observable.subscribe(
      (data) => {
        console.log('success');
        NProgress.done();
      },
      (err) => {
        console.log(err);
        NProgress.done();
      }
    );
  }
}

export default Page;