-
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);
网友评论