redux 和 mobx 初体验

前段时间搞了 Vue,现在又得开始写 React 了。 我堂堂的一个后端,真是太残忍啦 o(╯□╰)o

接触过 Vue 的应该都知道,Vue 的状态管理可以有两种实现,一种是 Vuex,还有一种是 eventBus 形式。

React 状态管理,老牌的应该是 Redux,但是存在了太多的概念,对于刚接触的童鞋不太友好。mobx 当属时代的新星了。不管从效率,还是易读性都远超 Redux。

下面带来俩小🌰大家感受下~~

最简单的一个 redux 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {createStore} from 'redux';
const ADD_ACTION = 'ADD';
const add = (num) => {
return {
type: ADD_ACTION,
num
};
};
const initialState = {
count: 0
};
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));

最简单的一个 mobx 操作

1
2
3
4
5
6
7
8
9
10
import {observable, action} from 'mobx';
const mobxStore = observable({
count: 0,
add: action((num) => {
this.count += num;
})
});
mobxStore.add(1);
o(╯□╰)o我只要一毛钱的鼓励~~