最近开启一个新的项目，框架是react。但是在选择数据状态管理的时候，有点选择困难了。

总的说来，react状态管理，有如下几种:

• react-redux 写起来太过繁琐
• dva 集成度太高，版本老旧，虽然是阿里的产品，但是目前基本处于不维护状态
• rematch 作者不维护了
• mobx

其实，前三个都是redux或者对redux的封装，mobx的另外一种模式，具体的区别，不赘述。

场景，我们设计一个全局的状态管理

1.添加依赖

"mobx": "^4.0.0",

"mobx-react": "^5.0.0",

"mobx-react-devtools": "^5.0.0",

2.定义一个store

import {observable, computed, action} from 'mobx';
export default class CtxStore{

    @observable operator = null;

    @computed get completedOperator(){
        return this.operator;
    }

    @action
    setOperator(value){
        this.operator = value;
    }

}

此处operator就是当前操作人信息

3.定义一个store入口，在store文件夹下创建一个Index.js文件

import CtxStore from "./CtxStore";

export default {
    ctxStore: new CtxStore
}

4.在程序入口处初始化store

import "../less/style.less";

import React from "react";
import ReactDom from "react-dom";
import { Provider } from 'mobx-react';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale-provider/zh_CN';
import {
    HashRouter as Router
} from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import routes from "./routes/route";
import stores from "./store";


ReactDom.render(
    <Provider {...stores}>
        <ConfigProvider locale={zh_CN}>
            <Router>{renderRoutes(routes)}</Router>
        </ConfigProvider>
    </Provider>,
    document.getElementById("app")
);

5.怎么使用store

import * as React from "react";
import { inject,observer } from 'mobx-react';
import SignInForm from "./sign_in_form/SignInForm";

@inject("ctxStore")
@observer
class SignIn extends React.Component{

    handleSignInSuccess = (value)=>{
        const {history,ctxStore} = this.props;
        ctxStore.setOperator(value);
        history.push(`/admin`);
    };

    render() {
        return (
            <div>
                <div style={{ paddingTop :'100px'}}>
                    <SignInForm onSuccess={this.handleSignInSuccess} />
                </div>
            </div>
        )
    }
}
export default SignIn

使用store的时候，要用把store注入进去,然后就可以在props里拿到ctxStore

如果是mobx6.x请参考  mobx5.x升级到mobx6.x

参考资料：

https://cn.mobx.js.org/