Redux and Mobx浅谈对比

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爱不释手，那还是开启严格模式，再加上一套状态管理的规范吧。

import { createStore } from 'redux'
 
 /* redux */
 //第一步定义 actiontype
 const INCREMENT = 'INCREMENT';
 
 //第二步编写action函数  
 //Action行为、描述数据的行为，表示一个动作（一个动作就是一个对象）
 //“Action 就是 View 发出的通知，表示 State 应该要发生变化了。”)
 const add = (num) => {
   return {
     type: INCREMENT,//这个type表示动作的名字
     num,
   }
 }
 
 //第三部初始state
 const initialState = {
   count: 0,
 }

 //第四部出发reducers改变状态
 //Reducer（处理器）
 //dispatch()将 action 发送出来，Store接受这个 action 并返回一个新的状态，此时创建新状态的过程就是Reduer(处理器)
 //Reducer是一个函数，它接受两个参数 state(当前状态值) && action，返回一个新的状态值 state。
 const reducers = (state = initialState, action) => {
   switch (action.type) {
     case INCREMENT:
       return  {
           ...state,
           count: state.count + 1,
       }
     default:
       return {
           ...state
       }
   }
 }
 
 //创建storestore(商店、仓库、库) 即是保存数据的地方 整个应用只能有一个Store
 //Redux提供 creatStore 函数来生成 Store。
 const Store = createStore(reducers)

 //dispatch() 用来发送Action的唯一方法
 Store.dispatch(add(1));

 //如何获取state
 // state(状态、某个时刻的数据即是Store的状态)
 //获取状态的方法是store.getState()
 console.log('state'+store.getState());

 const log = () => {
     console.log(store.getState())
 }

 log();

 //只要每次store中的数据有变化都会监听log这个函数，打印出当前的数据
 store.subscribe(log);

最后编辑于：2019.01.12 14:51:52