redux VS mobx

前言：redux和mobx都是状态管理器，避免父级到子级再到子子级嵌套单向数据流，可以逻辑清晰的管理更新共享数据。

一.redux

redux.js文件：

 

// 定义变量
const CODE_CHANGE = 'CODE_CHANGE'
const NUMBER_LIST = 'NUMBER_LIST'
const ERROR_MSG = 'ERROR_MSG'

// 初始化数据
const initState = {
  industryNumber: storage.get('industryNumber'),
  numberList: [],
  msg: ''
}

// reducer
export function isNumber(state = initState, action) {
  switch (action.type) {
    case CODE_CHANGE:
      return { ...state, industryNumber: action.industryNumber }
    case NUMBER_LIST:
      return { ...state, numberList: action.numberList }
    case ERROR_MSG:
      return { ...state, msg: action.msg }
    default:
      return state
  }
}

reducer.js文件：

// 合并所有的reducer，并且返回
import { combineReducers } from 'redux'
import { isNumber } from '/redux'

export default combineReducers({ isNumber })

index.js文件：

 import React from 'react'

 import ReactDOM from 'react-dom'

 import MainRouter from './Router'

  // 引入redux

import { createStore, applyMiddleware, compose } from 'redux'
importthunk from 'redux-thunk' // 中间插件，增强dispatch功能，可异步调用可接受函数参数
import { Provider } from 'react-redux' //redux组件，全部子级可以直接更新redux的state 
import reducers from './reducer' 
// 这里判断浏览器环境是否开启Redux DevTools的插件（chrome浏览器扩展插件应用商店下载）
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : h => h //没有插件则返回空函数 
const store = createStore(reducers, compose( applyMiddleware(thunk), reduxDevtools )) // 创建store
ReactDOM.render( 
<Provider store={store}> 
<MainRouter/> //路由 
</Provider>, 
document.getElementById('root') )

某子组件：

import { connect } from 'react-redux'  // 装饰器
const fetchNumberList = () => {
return dispatch => {
    fetch('异步请求').then(res => {
      if (res.code === 0) {
        dispatch({ type: NUMBER_LIST, numberList: res.data })
      } 
    })
  }
}

@connect(
  state => state.isNumber,
  { fetchNumberList }  // 一些之前写好的方法
)
class IndustryManagement extends Component {
        constructor(props) {
        super(props)
        this.state= {
        industryNumber: this.props.industryNumber && this.props.industryNumber[0], // 直接props引用redux的state
        }
        }
        btnChange() {
        this.props.fetchNumberList() //经过装饰器的函数都可用props引用
        }
      render() {
       return (
       <button onClick={ this.btnChange.bind(this) }>
       )
      }  
}