react+redux+antd图书管理系统学习

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);
如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。

 

双向数据绑定，数据模型（Module）和视图（View）之间的双向绑定。无论数据改变，或是用户操作，都能带来互相的变动，自动更新。

 

4. 不知道action中的payload是什么

5. import / export ：es6代码模块化模式

6. let 声明语句 ： 块级变量声明语句

7. 箭头函数： (..) => {..} 形式的函数