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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值