时间旅行java_[ 一起学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保持同步。
以上就是本次更新的主要内容,篇幅比较小,主要是对上一篇的补充和扩展。在这再给一下实例代码的地址,有兴趣的朋友可以下载下来本地运行、学习。
时间旅行java_[ 一起学React系列 -- 7 ] 秘术之时间旅行-2相关推荐
- [ 一起学React系列 -- 6 ] 秘术之时间旅行-1
标题看起来挺新颖的,笔者都觉得很高大上是不是哈哈... 抛转 时间旅行在生活中是一个非常吸引人的概念,虽然现在无法实现但说不定未来的某天就实现了!然后就穿梭会过去杀掉小时候的自己然后就开始懵逼自己是谁 ...
- [ 一起学React系列 -- 10 ] i18n
今天来介绍一个非常international的东西. i18n 国际化(internationalization)的简称.之所以叫i18n,是因为字母i和n之间有18个字母,所以才叫i18n.不要认为 ...
- [ 一起学React系列 -- 11 ] React-Router4 (1)
2019年不知不觉已经过去19天了,有没有给自己做个总结?有没有给明年做个计划? 当然笔者已经做好了明年的工作.学习计划:同时也包括该系列博客剩下的博文计划,目前还剩4篇:分别是两篇React-Rou ...
- 前端小白学React系列之——浅仿一下炒股软件(雪球)
前言 React是用于构建用户界面的JavaScript库,React组件化一直是React项目开发的重要学习过程.最近自己也在刚开始学习React组件化开发,就打算通过写一个小项目来巩固自己的学习成 ...
- 跟Kafka学技术系列之时间轮
写在前面 kafka是一个分布式消息中间件,其高可用高吞吐的特点是大数据领域首选的消息中间件,Kafka是分布式消息队列的顺序读写文件分段组织串联起来思想的鼻祖,包括RocketMq这些消息队列都是借 ...
- 小白学react之页面BaseLayout框架及微信的坑
上一篇<小白学react之SASS实战>我们学习了如何通过运用sass来为我们的应用页面"上色",加入css的支持. 但是我们到现在为止,每个页面的标题还是系统默认的, ...
- 小白学react之网页获取微信用户信息
通过上一篇<小白学react之EJS模版实战>我们学习了怎样通过EJS模版生成我们高定制化的index.html文件. 本篇我们将会继续延续我们的alt-tutorial项目的实战计划.去 ...
- 手挽手带你学React:三档 React-router4.x的使用
手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目 什么是React-router React Router 是一个基于 React 之上的强大 ...
- 跟着鸟哥学Linux系列笔记1
跟着鸟哥学Linux系列笔记0-扫盲之概念 跟着鸟哥学Linux系列笔记0-如何解决问题 装完linux之后,接下来一步就是进行相关命令的学习了 第五章:首次登录与在线求助man page 1. X ...
最新文章
- Web后台服务开发——数据库查询之引入TypeORM
- 读《c#与算法--快速排序》随笔
- 【嵌入式】Libmodbus之TCP模式Master端程序示例
- java 分布式同步_Java Web分布式集群搭建(三)——Session同步
- qemu-kvm磁盘读写的缓冲(cache)的五种模式
- c语言在函数中只执行一次,请问大家,为什么我调用我定义的函数俩次,但是程序只执行一次...
- laravel5.6 使用指定字段作为key_MyRocks TTL使用姿势及Bugfix
- Python模块(四)操作redis
- 12、scala函数式编程集合
- 热敏打印机原理java_java - 使用TSC TTP-342E Pro热敏打印机Java打印 - 堆栈内存溢出...
- 001----Mysql隔离级别
- linux下解压java压缩包报错
- W25Q64内部结构
- 计算机财务应用实验心得,金蝶财务软件实训心得.doc
- C语言C++,dirent自创ddir结构体,实现更便捷的文件夹操作
- fiddler Android下https抓包全攻略
- 【Jquery练习】tab栏切换
- canvas画出闪瞎眼的简单图形
- 【ESG】Aggregate Confusion: The Divergence of ESG Ratings
- Ubuntu 16.04版本的 网易云音乐 linux 安装包资源以及下载过程