Mobx入门和较佳实践-白红宇

之前讲到过我们团队从redux迁移到mobx，为什么我们抛弃了redux呢？一个很重要的原因就是使用redux开发，代码量增多，复杂度增大，同时需要维护api，action，reducer，即使是借助redux-thunk或者redux-promise这样的中间件，action这一层的代码量感觉还是太多了，光是actionType的命名都需要斟酌思考，mobx将action和reducer结合到了一起，省去了type的命名，以及es6+的装饰器的引入，整个代码量和复杂度降低了不少，自从用了mobx整个人都轻松了许多！

首先简单介绍一下mobx，他和redux类似数据都是单向流动，通过action改变state，促使view更新

下面让我们来撸一个简单的例子吧

//store.jsimport { observable, autorun, flow, computed, when, reaction, action } from 'mobx';import * as api from './api';class UserStore {    @observable    basicInfo = {};        // constructor函数里面可以放一些初始化的action    constructor() {        // when如果没有第二个参数，则返回一个promise，配合await或yield使用        when(               // 一旦...            () => false,            // ... 然后            () => this.dispose()        )    }        // 在observable对象发生变化时，会调用，第二个参数表示配置，有delay和onError    auto = autorun(        e => {            // console.log(e);        },        { delay: 3000 }    );        // autorun的变种，可以更精确的配置对象的属性    myReaction = reaction(() => this.isLogined, isLogined => console.log('myReaction'));        // 类似vue中computed的用法    @computed    get total() {        console.log(this.currentStaffInfo);        return this.currentStaffInfo;    }    getBasicInfo = flow(function*() {        try {            // 这里也可以调用其他action            this.basicInfo = (yield api.queryInfo()).payload;        } catch (error) {            this.basicInfo = {};        }    });        @action    setBasicInfo = value => {        this.basicInfo = value;    };}export default new UserStore();复制代码

//User.jsximport React, { Component } from 'react';import { observer, Provider, inject } from 'mobx-react';import UserStore from './store';@inject('UserStore')@observerclass User extends Component {    componentDidMount() {        this.props.UserStore.getBasicInfo()    }    render() {        return (            
    
                     {this.props.UserStore.basicInfo.name}            
    
        );    }}export default (    
            
         
    );复制代码

这样就大功告成啦，怎么样，mobx是不是特别简单清爽，mobx还有很多其他特性，希望大家能够多多去探索交流！