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.js
import { 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.jsx
import React, { Component } from 'react';
import { observer, Provider, inject } from 'mobx-react';
import UserStore from './store';

@inject('UserStore')
@observer
class User extends Component {
    componentDidMount() {
        this.props.UserStore.getBasicInfo()
    }
    render() {
        return (
            <div>
                {this.props.UserStore.basicInfo.name}
            </div>
        );
    }
}

export default (
    <Provider UserStore={UserStore}>
        <User />
    </Provider>
);
複製代碼

這樣就大功告成啦，怎麼樣，mobx是否是特別簡單清爽，mobx還有不少其餘特性，但願你們可以多多去探索交流！