mobx


  • 使用 redux-thunk、 redux-saga、 redux-observable、 MobX制作同样的一个小项目:

    data flow demo

    这个项目调用github API查找 github 用户,点击头像之后还可以知道这个用户的 follower 和 following。简单来说,就是调用了三次 API(即三次异步请求)。


    目录

    • redux-thunk
    • redux-saga
    • redux-observable
    • mobx

    本文不是教程,并不会手把手地教你如何使用他们,只是一个指引,一份示例,让你能够了解他们各自的特点,以便选择最适合自己的。


    redux-thunk

    code

    redux-t

  • MobX资料收集

    • Github: mobx
    • 知乎:[干货] 使用Mobx更好地处理React数据
    • 推酷:不懂函数式?用 mobx 来写 react 应用吧
    • segmentfault: MobX
    • MobX api
    • MobX 中文文档
  • 参考资料:Question: Best practice to observe child's store

  • 在看mobx api @computed中提到不加@computed等同于加了@computed,自己测试过程也是如此,代码如下

    export default class TodoStore {
    	@observable todos = [];
            @computed get activeTodoCount() {
    		return this.todos.reduce(function(sum, todo){
    		   return sum + (todo.completed ? 0 : 1)
    		}, 0);
    	}
    }
    1. 测试过程发现加不加@computed ,都可以获取正确的
  • 问题背景:

    使用antd的table组件的时候有一个dataSource的属性,传递一个表格的初始数据,是array类型,在mobx中设置初始的data = [],但是使用的时候发现浏览器报错了,错误如下:

    Failed prop type: Invalid prop `dataSource` of type `object` 
    supplied to `t`, expected `array`.
    

    最终解决方案是:

    dataSource = {store.data.slice()}
    

    最后加一个slice方法

    具体原因参照如下:参考资料:mobx: array