谈谈React的全局状态管理Redux和Mobx的使用

​    大多数人在首次接触React的状态管理都是Redux，但是flow的概念对于刚开始接触React的来说视乎又有点抽象，而且他必须要按照约定流程来组织代码，有时候很简单的事情用它感觉有点杀鸡用牛刀。于是乎mobx来出现了，我第一次接触到他的时候也有一种如沐春风的赶脚，网上有大量介绍关于使用Mobx各种好处的文章，于是我信了，坑次吭哧拿到项目首先就想到了它，眼里容不下其他，就像遇见美食总想一次吃个够，等到吃到腻了才会发现原来山珍海味都比不上粗茶淡饭。因此我写这一片文章不是来吹Mobx有多么牛逼的，我是结合我在项目中的使用经验来对比分析一下使用Mobx和Redux优势和劣势，什么时候适合使用Redux，什么时候适合使用Mobx。好了，话不多说开始入正题。

首先，先来看一下Redux。

Redux的使用步骤：

1. 创建reducers
2. 创建actionCreators
3. 通过createStore，combinReduces，applymiddleware来创建一个全局的store
4. 通过react-redux提供的高阶组件Provider和connect来将store和action挂载到子组件的props中去。

经过上面这个四步，大概就可以在react中将redux使用起来了，当然,这里还不涉及到中间件，个人感觉中间件是Redux中个人感觉比较有特点的地方，熟悉express和koa的前端来说，对中间件的概念并不陌生，这里不赘述，有兴趣可以网上搜一下。

​    大致说了一下使用流程，下面就用一段代码来具体实现一下上面的流程，毕竟程序猿还是靠代码说话的，有时候我们为了方便会将reducers和actincreators写在一个文件中了，我建议还是将reduces和actioncreators分文件夹和和分模块管理。这样随着项目的迭代，代码的层级结构会更加清楚，维护起来也更加得心应手。

types.js

export const USERINFO = 'USERINFO';

common-reducer.js

let initState = {
   
    userInfo:{
   },
    counter:0
}
function reducer(state = initState,action){
   
    let {
   type,preload=null} = action;
    switch(type){
   
        case USERINFO:
           state.userInfo = preload 
           return Object.;
        default:
           return state;
    }
}
export default reducer;

common-action.js

export getUserInfo = function(){
   
    return {
   type:USERINFO,preload:{
   username:'wangyy'}}
}

index.js

import {
   createStore,combineReducers,applyMiddleware} from "redux"
import module1 from "./common-reducer.js";
import thunk from "redux-thunk";
//这里使用分墓快
const reducers = combineReducers{
   
    module1
}
//applyMiddleware（thunk）使用thunk中间件，来让我们的action具备异步功能
const store = createStore(reducers，applyMiddleware（thunk）)

上面创建好之后，我们就可以开始在组件中开始应用了全局状态了。

    redux本身提供了subsrible功能的，用来定于action的触发，这里我们使用react-redux提供的高阶组件Provider来将store全局下发，以及connect组件来实现state和action到组件的映射

main.js（入口文件）

import React from "react";
import ReactDom from "react-dom"