[ 一起學React系列 -- 7 ] 祕術之時間旅行-2

距離上一次更新已經有半個月了，這半個月來主要在忙兩件事：一個是最近老闆給了個自動化測試任務，另一個是和學校的弟弟一起搞一個微信小遊戲...emmmm！其實主要是懶！！！

本篇是作爲上篇的續集，不知道看過上篇的小夥伴對筆者改造過的時間旅行實現方案有沒有什麼意見或者建議！當然本篇仍然搞時間旅行、仍然使用上篇的實現方案，還是原來的味道！！！
不過上篇實現時間旅行的狀態管理方案是...額，沒有任何方案，只是由組件自己管理的。但這樣做的缺點很多，不利於狀態在組件之間共享。畢竟只能自己玩的組件不是好組件。所以本篇使用Redux作爲狀態管理器來實現時間旅行。
具體的時間旅行實現方案和代碼已經在上篇提供了，所以本篇着眼於基於Redux實現時間旅行過程中需要注意的點。

基於Redux的時間旅行解決方案

在React中使用Redux

此處省略1萬字...因爲這種教程簡直多得不行，如果再糾結可能就多餘了！

Redux之狀態對象

因爲實現方案不變，所以保存在Redux中的狀態對象仍然是狀態位置currentIndex和狀態集list。

Redux之Action

對上一篇有過了解的朋友知道在整個過程中主要涉及到三個操作：添加、撤銷、返回，當然真實情況下肯定還有別的操作不過此地不做更多討論，萬變不離其宗。所以對於的Action應該有三個

export function Add(list) {
    return {
        type: ADD,
        payload: {'list': list}
    }
}

export function Undo() {
    return {
        type: UNDO,
    }
}

export function Redo() {
    return {
        type: REDO,
    }
}

對於同一功能的Action，我們使用type作爲區分標誌，因此就有ADD(添加)、UNDO(撤銷)、REDO(返回)。因爲添加涉及到狀態對象所以action的payload爲所需要添加的狀態對象、撤銷和返回控制currentIndex的加減，所以只需要確定type然後具體的加減操作在Reducer中完成。

Redux之Reducer

先看Reducer代碼：

export default function TravelReducer(state = {}, action) {
    switch (action.type) {
        case ADD:
            let payloadContent = action.payload['list'];
            let archive = state['list'].slice();
            let currentIndex_ADD = state['currentIndex'];
            archive.push(payloadContent);
            return {...state, ...{'list': archive, 'currentIndex': currentIndex_ADD + 1}};
        case UNDO:
            let currentIndex_UNDO = state['currentIndex'];
            return {...state, ...{'currentIndex': currentIndex_UNDO - 1}};
        case REDO:
            let currentIndex_REDO = state['currentIndex'];
            return {...state, ...{'currentIndex': currentIndex_REDO + 1}};
        default:
            return state
    }
}

Reducer處理的type要與Action的type相對應。並且從中可以看出ADD過程不僅僅向list對象中添加一個狀態對象，還對currentIndex進行了加一操作，這是爲了保證current狀態與currentIndex保持同步。而UNDO與REDO就相對比較簡單，僅僅是加一或者減一操作，目的也是保證current狀態與currentIndex保持同步。

以上就是本次更新的主要內容，篇幅比較小，主要是對上一篇的補充和擴展。在這再給一下實例代碼的地址，有興趣的朋友可以下載下來本地運行、學習。