用todolist练习react-redux(2016/8/20总结)


使用简书的第一天,想把以前七零八落的总结整合一下

此练习github地址
今天下午是这个礼拜里最充实的一个下午,和杨悦还有邱敏敏一起结队编程,真的是超嗨超开森!!!

我们一起练习了reactredux结合写 todolist项目,我们先配置了webpackserver,初始化一个组件,保证可以访问到预定的端口并显示这个组件中渲染的东西。然后我们定义了一个store,使用并引入了Provider,前面都比较顺。

我们遇到的第一个错误就是在todo-list.js中定义了TodoList组件,忘记了用export将其导出,在app.js里的 App组件中直接调用,浏览器中并不会报TodoList的错误,而是说检查apprender的使用;因为之前的小步测试并书写代码保证了App里的代码都是正确的,所以我们能直接定位到TodoList里,发现问题并添加export,使用git提交代码。

接下来我们利用connect,借助其参数mapStateToPropsmapDispatchTodoList从一个展示组件包装为一个容器组件,将reducer里传回的state中的信息渲染到页面上,这里我们发现当传回的东西是一个数组时,只能通过console.log打印它的信息而不能直接渲染,我们可以使用map等合适的方法打印我们想要的信息。功能完成后提交代码。

然后我们在add-todo里定义了AddTodo组件,这个组件里主要涉及添加功能,所以要有一个add方法,我们发现,当我们直接在展示组件中使用this.props.add,没有定义并实现这个函数时,按理说时应该报错的,因为没有这个方法,但是没有报错,后来我们在官网上找到原因是没有使用propsTypes来判断是否接受到这个方法。恩,棒棒哒。

接下来我们当然是要添加删除功能了,当点击删除时,我们会将REMOVE这个类型和要删除的对象的index通过dispatch传给reducer去处理。

一开始一切都OK。事情发生在一个“阳光明媚”的下午,当我们添加all,active,completed选项时,可怕的现象发生了;我添加了1,2,3;将1选中为已完成,然后点击active,显示2,3;恩这是对的,当我删除2时,它把1给删了。这一切的背后到底隐藏着怎样不为人只的秘密,究竟时人性的扭曲还是道德的沦丧!!!

哦好吧,让我来揭开神秘的面纱,是因为我在删除时传送了index来标识这个对象,而all,active,completed会因为其状态的不同来筛选符合条件的对象来显示,所以我选中了1,在点击active时,2和3的下标已经发生变化了,所以,当我点击删除2时,它把下标0传送给了reducer,然后就把下标为0的对象1给删除了。哈哈好一个移花接木,然而还是逃不过我们的火眼金睛!!!然后我们为每个对象设置了id,每次将对象的id传送,然后通过Array.prototype.find方法找到符合这个id的对象,取到它的index值,然后将它删除~~

接下来我们要实现clear completed(清除已完成)这个功能,我们将这个类型通过dispatch传送给reducer,然后用Array.prototype.fliter函数选出其中isDonefalse(也就是没有做的事情)的对象,然回给todolist去显示。这里我们还遇到了一个问题,就是在点击clear completed时,它的确实现了删除已完成这个功能,但显示出来的列表的空的,必须再次点击all,active才能显示信息。这是为什么呢,为什么呢?哦我灵机一动,想起来我在之前对all,active,completed筛选状态值时用if,else做判断,因为只有三种情况,所以我第三种completed的判断条件直接是else,所以导致这个问题。然后我想清除已完成后剩下的都是未完成,所以我只需要将all写在最后一个判断条件里就好了,好的,大功告成~~

真的真的超开心,完成的时候感觉超幸福哈哈~~
今天周天,补上昨天(8月20)的总结,哦总结,昨天太懒了,没写你,2016/8/21 11:45,sorry,晚安!


哦天哪,我刚才一直没网,不过我在我翔哥的帮助下解决了这个问题,是这样的:我在shellping www.baidu.com,显示未知的主机名,问题的原因是我的主机所访问的地址并非域名解析服务器的地址。我进入/目录下访问etc/resolv.conf, 看到nameservers 127.0.0.1,此地址为本地回环地址,所以我要配置域名解析服务器的IP地址为google的地址,所以我修改nameservers 127.0.0.1上方增添nameservers 114.114.114.114。这个时候我发现我无法修改其内容,所以我用sudo su命令将自己升级成super用户,然后我就为所欲为哈哈,我有网了~~啦啦啦提交总结ing~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,719评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,337评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,887评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,488评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,313评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,284评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,672评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,346评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,644评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,700评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,457评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,316评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,706评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,261评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,648评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,859评论 2 335

推荐阅读更多精彩内容