[ 一起学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保持同步。

以上就是本次更新的主要内容，篇幅比较小，主要是对上一篇的补充和扩展。在这再给一下实例代码的地址，有兴趣的朋友可以下载下来本地运行、学习。