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. 箭頭函數： (..) => {..} 形式的函數