用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~~