gent-react
A simple
React Tool
to use with gent-store and rxjs。
安装
npm i gent-react gent-store -S
使用
第一步:初始化一个绑定函数,并在入口组件通过属性传递。
// libs/bind-gent.js;; const bindGent = ; ;
第二步:在根组件
App
的constructor
方法调用绑定函数,并监听store
变化。
;;; Component { superprops; thisstate = {}; // 调用绑定函数 ; // 监听store,有变化是重新渲染根组件 this$subsstore = this$store; }
第三步:在自己类使用绑定的
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
上的订阅。
;; Component { superprops true; // bind gent ; // init state thisstate = // ; } { // 获取全局数据 let data = this$sotre; //... } // action: add user { // 放弃上次订阅,如果有 this; let user = id: Date name: 'user-' + Math ; // 定义流 let observable = ofuser; // 服务器请求 observable = observable; // 提交store变更 observable = observable // 订阅,开始一个数据流 NProgressstart; this$subsaddItem = observable; } ;