[ 一塊兒學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保持同步。

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