// 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;

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({})
    );
  }
}

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;