react+mobx 編寫 Async裝飾器
阿新 • • 發佈:2018-12-04
使用
// indexStore.js
import axios from "axios";
import { from } from "rxjs";
import { map } from "rxjs/operators";
@util.Async(from(axios("http://localhost:5000/test")).pipe(map(v => v.data.users)))
@util.isEmpty(true)
// @observable // 不需要observer
list;
實現
import { set } from "mobx"; import * as u from "lodash"; /** * * async: false => data => isData * * async: true => data => isData$ */ export const isEmpty = (async = false) => { return function(target, key) { let opt = async ? `is${u.upperFirst(key)}$` : `is${u.upperFirst(key)}`; Object.defineProperty(target, opt, { get: function proxyGetter() { const k = async ? `${key}$` : key; return !u.isEmpty(this[k]); }, enumerable: true, configurable: true, }); }; }; // list=> list$ export const Async = (fn$, initData = null) => { return function(target, key) { set(target, { [`${key}$`]: initData, }); fn$.subscribe( v => { set(target, { [`${key}$`]: v, }); }, err => console.error(err), () => { /* done */ }, ); }; };
元件
const INDEXSTORE = "indexStore"; @inject(INDEXSTORE) @observer class Test extends Component { render() { const { indexStore } = this.props; return ( <> {indexStore.isList$ && ( <> <h2>list</h2> <ul> {indexStore.list$.map(el => ( <li key={el}>{el}</li> ))} </ul> </> )} </> ); } }