Redux and Mobx浅谈对比

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_17775997/article/details/83506361

• Redex与Mobx都是状态管理库，用来管理应用的内部状态

• Redux三大原则
  1.单一数据源
  2.State 是只读的
  3.使用纯函数来执行修改
  所以可以说是这些样本代码保证了state的状态的可管理性，毕竟所有的东西都是泾渭分明的，让出错的可能性和找问题的成本降到了最低。

//Redex简单用法

import {
  createStore,
} from 'redux'

/* redux */
//第一步定义 actiontype
const ADD_ACTION = 'ADD'；

//第二步编写action函数
const add = (num) => {
  return {
    type: ADD_ACTION,
    num,
  }
}

//第三部初始state
const initialState = {
  count: 0,
}
//第四部出发reducers改变状态
const reducers = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ACTION:
      return Object.assign({}, state, {
        count: state.count + action.num,
      })
    default:
      return state
  }
}

const reduxStore = createStore(reducers)
reduxStore.dispatch(add(1))

• Mobex简单用法

import {
  observable,
  action,
} from 'mobx'

/* mobx */
const mobxStore = observable({
  count: 0,
  add: action(function(num) {
    this.count += num
  })
})
mobxStore.add(1)
mobxStore.count += 1

以上，使用mobX与Redux简单使用对比，可以看书Mobx构建应用迅速，但是当项目足够大的时候，还是使用redux，如果的确对mobX爱不释手，那还是开启严格模式，再加上一套状态管理的规范吧。