1. 之前学习到的是代码二,而在redux官方文档中有这样一段描述:不要修改 state。 使用 Object.assign() 创建了一个副本。不能这样使用 Object.assign(state, {visibilityFilter: action.filter }),因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。在redux-devtools中,我们可以查看到redux下所有通过reducer更新state的记录,每一个记录都对应着内存中某一个具体的state,让用户可以追溯到每一次历史操作产生与执行时,当时的具体状态,这也是使用redux管理状态的重要优势之一.若不创建副本我们将无法追溯state变更的历史记录.创建副本也是为了保证向下传入的this.props与nextProps能得到正确的值,以便我们能够利用前后props的改变情况以决定如何render组件
代码一 switch(action.type){ case 'INIT_BOOK_ACTION': return Object.assign({},state,{ data : [...action.payload] }) default: return state } 代码二 switch(action.type){ case 'add': return state+1 default: return state
}
2. ...是ES6的语法,是展开运算符,例如
var array = [1,2,3,4,5,6,7];
console.log(array);
//输出 [1, 2, 3, 4, 5, 6, 7]
console.log(...array);
//输出 1 2 3 4 5 6 7
先把要的数据拆开,再组装
switch(action.type){ case 'INIT_BOOK_ACTION': return Object.assign({},state,{ data : [...action.payload] })
case 'ADD_BOOK_ACTION' :
return Object.assign({},state,{
data : [...state.data,action.payload]
})
default: return state
}
export const initBookAction = (data) => {
return {
type : INIT_BOOK_ACTION,
payload : data
}
}
3.
单向数据绑定指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码
所有状态的改变可记录、可跟踪,源头易追溯;
所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。