redux項目實戰應用筆錄

（1）首先搭建完畢後開始安裝依賴

redux
react-redux---------->基于redux開發，簡化文法
redux-thunk---------->異步中間件，實作redux 異步程式設計
redux-devtools-extension-------->調試專用，配合chrome拓展程式進行redux調試      

（2）建立項目目錄和對應檔案

　　src下建立store目錄，然後建立檔案結構

　　

　　1、index核心子產品

　　　　

　　2、reducer純函數管理子產品

注意：
 *  向外預設暴露的是合并産生的總的reducer函數
 *  總的state的結構為： 
 *      {
 *          headTitle:'首頁',
 *          user:{}
 *      }
 *       

　　3、actionCreators.js建立行為子產品，即action creator函數的子產品

　　4、actionType.js即action的type常量辨別名稱的子產品

（3）開始使用

　　1、提供器provider包裹根元件

　　接下來啟動項目，在控制台檢視redux相關，如下所示

（4）使用redux管理頭部标題

　　1、分析：頭部标題主要涉及到左側導航元件和頭部導航元件的互動，左側導航主要點選時候更新狀态，更新時需要對應的action和actionType，是以先編寫兩者

　　2、接下來編寫reducer更新state

　　注意：reducer下針對對象、數組、普通變量的修改操作不同，針對普通變量直接修改即可。如果是數組或對象最好使用深拷貝方案進行修改，不要直接修改

　　因為這裡headTitle是對象格式，是以使用深拷貝方式，詳見React下reducer中處理數組&&對象的指派改動.

　　3、接下來首先在頭部導航展示，最後在元件進行事件派發dispatch

　　先看下之前的做法，之前做法是在初始化時結合目前路徑和menus清單對比，然後綁定到元件this執行個體，最後進行渲染，如下所示

　　正常做法是用react-redux的connect方法，用容器元件包裝UI元件，這裡我們未來友善，直接在這裡操作

　　首先在頭部元件導入連接配接器connect映射state和action

注意：
    connect傳入一般屬性用于顯示；函數屬性用于修改。這裡我們隻需顯示，是以隻傳入一般屬性即可      

　　接下來元件裡之前擷取設定title的文法便不再需要，删除即可，改為redux擷取，如下所示

　　此時可以顯示首頁

　　4、接下來點選左側導航派發事件，更新store的state即可，是以接下來修改左側導航元件

　　還是和之前一樣，導入connect方法，傳入state映射和行為映射，将UI元件包裹到容器元件裡，将元件改為容器元件

注意：
    無論讀取或是修改store的state，都需要利用connect包裝UI元件生成容器元件，即react-redux核心。      

　　然後傳入行為映射action，接着觸發即可

　　此時便可以正常預覽，且切換時也可以正常顯示。但是在某個頁面重新整理後便丢失了目前頁面标題。state又改為了首頁... ...，在顯示處添加判斷即可

　　此時解決了重新整理重置state的問題，但退出重新登入後，會直接記錄退出時的state，如下所示，所說還需要進行修改

　　解方案，登入重定向時直接到/home即可

（5）Redux管理使用者資料

　　1、首先編寫一個用于登入的異步action，接收使用者名和密碼，請求成功後需要釋出同步action，是以接下來編寫接收使用者資訊的同步action。　

　　　　接下來首先編寫actionTypes

　　　　接下來去reducer做處理

　　　　最後合并導出，完整如下

/**純函數管理子產品，根據現有的state和action，傳回新的state和action----純函數 */
import {combineReducers} from 'redux'
import storageUtils from '../utils/storageUtils'
import {
    SET_HAED_TITLE,
    ACCEPT_USER,
    ERROR_MESSAGE,
    RESET_USER
}from './actionTypes'

/**管理頭部标題 */
const defaultState = {
    headTitle:'首頁',
    user:storageUtils.getUser() || {}
}

/**管理頭部标題 */
const headTitle = (state=defaultState.headTitle,action) => {
    switch(action.type){
        case SET_HAED_TITLE:
            return action.value
        default:
            return state
    }
}

/**管理使用者資訊user */
const user = (state=defaultState.user,action) => {
    switch(action.type){
        case ACCEPT_USER:
            return Object.assign({},state,{...action.value})
        case ERROR_MESSAGE:
            const errorMessage = action.value
            return {...state,msg:errorMessage}/**示範錯誤提示，在user添加msg對象 */
        case RESET_USER:
            return {}/**置空store中的user對象 */
        default:
            return state
    }
}

/**使用combineReducers整合之前的reducer，變成新的reducer */
export default combineReducers({
    headTitle,user
})      

　　接下來登入調用action，是以接下來操作Login.jsx元件，如下所示

　　①引入connect'連接配接器和異步action

　　②映射state和action，将元件改為容器元件

　　③引入使用

　　此時登入成功後會有報錯，如下所示

　　原因在于我們在項目裡很多地方依然使用者自定義記憶體memoryUtils.js，是以接下來依次更換為容器元件後，讀取redux下store的state.user即可

　　2、退出功能

　　将之前的操作去除，改為調用action，然後編寫退出action----logoutAction

　　最後利用reducer.js修改state

（6）自定義Redux

　　詳見React之自定義redux.