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

2016-09-04  本文已影响998人  恐怕是小珠桃子

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

此练习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~~

上一篇下一篇

猜你喜欢

热点阅读