白话Redux工作原理。浅显易懂。
如有纰漏或疑问,欢迎交流。
Redux 约法三章
唯一数据源(state)
虽然redux
中的state
与react
没有联系,但可以简单理解为react组件中的this.state
。html
文档只是state
的一种表现形式。所有html
的数据应该都是直接或间接来自于state
,否则UI视图是无法因state
改变而更新的。
数据源(state)只读
不应该直接修改state
数据。
对于数组使用:
Array.prototype.slice()//对数组进行拷贝
//使用ES6:
[...state, ...newState]
对于对象使用:
Object.assign({}, state, change1, change2...)//对对象进行拷贝
//使用ES6:
{...state, ...newState}
通过纯函数(pure function)改变数据源(state)
pure function
: 无其他API(包括Math, Date等)调用,无异步操作,preState => newState。
Redux数据流
简单介绍store
/reducer
/action
, 比较简洁,请牢记于心。
store
UI唯一数据来源,可以理解为react中的state,store信息的变化会触发视图更新.
action
对象。必须拥有type属性,用来描述发生什么。可选择携带发生时的数据,如用户输入的input value。切记:仅仅用来表述发生了什么。
reducer
pure function(上面有解释)。根据action.type来做出反应,(preState, action) => newState,生成的state是用来改变store的。
所以,data flow(数据流):
- UI发出动作,如click, submit;
- action, 描述发生了什么;
- reducer处理发生的事情,生成新state;
- store被更新;
- UI响应store更新
- …
Redux action
举几个例子,可能会比较直观:
{
type: “TOGGLE_TODO”, //这个type属性必须要,必须是字符串
index: 5 //附加信息,自己根据需要选择是否加入
};
{
type: “ADD_TODO”,
text:“学习Redux” //附加信息,这里是input value
}
没别的,就是这么简单。
有时候可以使用action生成器(action creators)来批量生产相似action对象,如:
//我需要根据不同的input value来生成高度相似的action:
function (text) {
return {
type: "ADD_TODO",
text: text //附加的信息
}
}
说明
虽然上面数据流提到,action通过reducer处理生成newState后才能够更改store信息。但是为了更好的语义编程,Redux通过语句store.dispatch(action)
来更新store,reducer对action的处理在内部处理。
Redux reducer
很简单
(theState, action) => (newState);
//仅仅只是根据action.type处理一下需要更新的state
来看一个相对完整的reducer:
function todoApp(state = initialState, action) { //注意需要处理undefined情况下的state默认值
switch (action.type) { //根据action.type来判断
case "SET_VISIBILITY_FILTER":
return Object.assign({}, state, {
visibilityFilter: action.filter
})
case “ADD_TODO”: //处理“ADD_TODO”的action type
//返回新state(newState),注意不要直接改变state,对象使用了
//Object.assign()。也可以使用ES的...操作符
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
case “TOGGLE_TODO”: //处理“TOGGLE_TODO”的action type
return Object.assign({}, state, {
todos: state.todos.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
})
default:
return state
}
}
Redux store
store
UI视图唯一数据来源(直接或间接),可以获取state,更新state,监听state变化,取消监听。所以store提供了一下方法:
-
store.getState()
获取当前state -
store.dispatch(action)
更新state -
store.subscribe(listener)
store更新后回调listener,回调函数里面可以调用store.getStore()来获取更新后得state哟~ - 取消listener的方式比较特别:再调用一次
store.subscribe(sameListner)
ps: 如有纰漏或疑问,欢迎交流。
先写这么多,有时间继续更新。