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

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