[ 一起学React系列 -- 7 ] 秘术之时间旅行-2

nidaye 发布于2019-08-23 12:20 / 1293人阅读

摘要：但这样做的缺点很多，不利于状态在组件之间共享。所以本篇使用作为状态管理器来实现时间旅行。并且从中可以看出过程不仅仅向对象中添加一个状态对象，还对进行了加一操作，这是为了保证状态与保持同步。

距离上一次更新已经有半个月了，这半个月来主要在忙两件事：一个是最近老板给了个自动化测试任务，另一个是和学校的弟弟一起搞一个微信小游戏...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保持同步。

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

服务器托管专线服务一起学linux 和一起学python 跟孩子一起学python 与孩子一起学python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98348.html

[ 一起学React系列 -- 6 ] 秘术之时间旅行-1

摘要：所谓的时间旅行从广义上来说无非就是三个动作回到过去进入未来回到现在，这个无论是从现实还是前端技术来说都是可靠的。单从技术栈来说，时间旅行不是一门技术而是一个思想套路。标题看起来挺新颖的，笔者都觉得很高大上是不是哈哈... 抛转时间旅行在生活中是一个非常吸引人的概念，虽然现在无法实现但说不定未来的某天就实现了！然后就穿梭会过去杀掉小时候的自己然后就开始懵逼自己是谁类似的狗血剧情......

付伦 2019-08-23 12:11 评论0 收藏0
写给初入门/半路出家的前端er

摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序员应该不在少数，我也是其中之一。为何会走向前端非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 评论0 收藏0
分享国外Python大咖如何在5个月内找到一份薪水翻番的工作的？

摘要：六个月前，我辞掉了初级开发者的工作，并去东南亚旅行了五个月。我的目标了解更多资料我原本计划去东南亚旅行个月，我也有信心在旅行回来后能够找到一份更好的工作。申请工作我下一站旅行地是老挝境内一个偏远的攀爬区。金三银四，谨以此文献给所有正在准备跳槽的你。 showImg(https://segmentfault.com/img/bVbhXVQ?w=640&h=640);六个月前，我辞掉了初...

Anleb 2019-07-31 11:12 评论0 收藏0
[ 一起学React系列 -- 2 ] UI的灵魂--State

摘要：首先卖个关子，下面我们一起来复习下小学还是初中的一枚数学知识。一旦更改了，会触发组件的重新渲染。为了页面渲染性能的考虑，有助于在中进行比较并确定是否重新渲染。概念引入对于React来说, 没有State就没有页面的渲染, 我们也将什么都看不到咋一听怎么那么唬人？不过的确是这样，正如标题所言State是UI的灵魂。我们都知道React的核心思想之一是组件化，将页面所展示的东西按一定...

XBaron 2019-08-23 11:43 评论0 收藏0
[ 一起学React系列 -- 0 ] React技术栈学习路线

摘要：的出现真可谓是前端界的福音，正与之宗旨所说，。据统计，目前世界上有的项目使用了。技术栈学习路线直到前段时间笔者的朋友给推荐了一个，真是欣喜若狂也更加坚定了自己在继续前进的想法。这是一个外国友人总结的一套技术栈学习路线，先给传送门。我相信点进来的同学都是冲着标题来的，当然本文也不会让各位失望。不过在正式介绍标题所述的内容之前，我们不妨先放下技术，一起回顾下自己做前端技术的心路历程。前...

Java3y 2019-08-26 12:16 评论0 收藏0