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;

第二步：在根组件App的constructor方法调用绑定函数，并监听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;