redux流程:Action => Reducer => State
1.Action
强制使用action来改变state, 这样可以清晰的知道应用当中发生什么、因为什么而改变。
function demoAction() {
return {
type: 'test',
data: {}
};
}
store.dispatch(demoAction);
action就是一个普通的js对象
2.Reducer
reducer的作用相当于是action与state的连接器;
function demoReducer(state, action) {
if(action.type === 'test') {
return action.data;
} else {
return state;
}
}
reducer只是一个接收state、action并返回新state的函数
3.State
state类似于普通对象:
{
test: anything
}
state的特殊在于他没有setter,你不能随便修改他。想要更新state中的数据,需要发一个action
三大原则
上述描述包含了redux的三大基本原则:
1. 单一数据源(整个应用的state被存储在一个object tree中, 这个obj tree只存在于唯一一个store中)
2. state是只读的(唯一改变state的方法是通过触发action)
3. 使用纯函数来执行修改(为了描述action如何改变state tree, 需要编写reduecers)