用todolist练习react-redux(2016/8/20
使用简书的第一天,想把以前七零八落的总结整合一下
此练习github地址
今天下午是这个礼拜里最充实的一个下午,和杨悦还有邱敏敏一起结队编程,真的是超嗨超开森!!!
我们一起练习了react
和redux
结合写 todolist
项目,我们先配置了webpack
和 server
,初始化一个组件,保证可以访问到预定的端口并显示这个组件中渲染的东西。然后我们定义了一个store
,使用并引入了Provider
,前面都比较顺。
我们遇到的第一个错误就是在todo-list.js
中定义了TodoList
组件,忘记了用export
将其导出,在app.js
里的 App
组件中直接调用,浏览器中并不会报TodoList
的错误,而是说检查app
里render
的使用;因为之前的小步测试并书写代码保证了App
里的代码都是正确的,所以我们能直接定位到TodoList
里,发现问题并添加export
,使用git
提交代码。
接下来我们利用connect
,借助其参数mapStateToProps
和mapDispatch
将TodoList
从一个展示组件包装为一个容器组件,将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
函数选出其中isDone
为false
(也就是没有做的事情)的对象,然回给todolist
去显示。这里我们还遇到了一个问题,就是在点击clear completed
时,它的确实现了删除已完成这个功能,但显示出来的列表的空的,必须再次点击all,active
才能显示信息。这是为什么呢,为什么呢?哦我灵机一动,想起来我在之前对all,active,completed
筛选状态值时用if,else
做判断,因为只有三种情况,所以我第三种completed
的判断条件直接是else
,所以导致这个问题。然后我想清除已完成后剩下的都是未完成,所以我只需要将all
写在最后一个判断条件里就好了,好的,大功告成~~
真的真的超开心,完成的时候感觉超幸福哈哈~~
今天周天,补上昨天(8月20)的总结,哦总结,昨天太懒了,没写你,2016/8/21 11:45,sorry,晚安!
哦天哪,我刚才一直没网,不过我在我翔哥的帮助下解决了这个问题,是这样的:我在shell
下 ping 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~~