最近在学习胡子大哈的react小书，内容讲的由浅入深，很值得react，react-redux小白一读。

废话不多说直接上地址：http://huziketang.mangojuice.top/books/react/

react小书看过两遍，而且都认真跟着操作了，里面的react-redux还是理解的不透彻，于是又去react-redux的官网学习，下载了示例：Todo列表，看了一下代码结构跟胡子大哈react小书里讲的不一样，我还是比较喜欢react小书里的代码结构：

所有的 Dumb 组件都放在 components/ 目录下，

所有的 Smart 的组件都放在 containers/ 目录下

示例：Todo列表的官网地址：http://cn.redux.js.org/docs/basics/ExampleTodoList.html

于是我按照react小书里的这种约定俗成的规则，把todolist里的components和containers调整了一下。

首先把界面进行组件划分，划分为以下组件：

最外面的为App

代码结结构改造前后

官网的代码Dumb 组件和Smart 组件分的没有很清晰，改造以后components里面的组件就是纯组件，只从props里接收参数，逻辑处理的部分都放在containers里面的smart组件里。

components 里AddTodo的逻辑处理在containers里的AddTodo

components 里Link的逻辑处理在containers里的FilterLink

components 里TodoList的逻辑处理在containers里的TodoList

components 里Todo是包含在components 的TodoList里的

而containers里的Footer又包含了FilterLink

containers里的App就是我们最外面index.js里最终要的App，它包含了containers里面的Footer，AddTodo，TodoList

欢迎下载，代码地址如下：

https://github.com/greenteaone/todolist-example

更改了react-redux 官方网站的todolist结构的更多相关文章

  1. react+redux官方实例TODO从最简单的入门（6）-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  2. react+redux官方实例TODO从最简单的入门（1）-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  3. react+redux官方实例TODO从最简单的入门（2）-- 增

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  4. react+redux官方实例TODO从最简单的入门（5）-- 查

    上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...

  5. react+redux官方实例TODO从最简单的入门（4）-- 改

    上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要 ...

  6. react+redux官方实例TODO从最简单的入门（3）-- 删

    上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.i ...

  7. 重写官方TodoList，对于初学react+redux的人来说，很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  8. react+redux+generation-modation脚手架添加一个todolist

    当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...

  9. react+redux+generation-modation脚手架搭建一个todolist

    TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...

随机推荐

  1. 11-15 dom 动态创建节点

    1.生成节点的方法  document.createElement(“div”) 2.插入节点的方法   父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...

  2. Linux之为集群内的机器设定主机名

    作业二:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名,相应的,集群的配置应该改成使用主机名的方式 1.主机信息配置并解析 [root@localhost ~]# ...

  3. JS_高程3.基本概念（2）

    1.ECMAScript数据类型 5种简单数据类型,分别是: Undefined Null Boolean Number String 1种复杂数据类型: Object (1)typeof操作符——检 ...

  4. sencha touch 学习汇总(转)

    1.官方网站:http://www.sencha.com/products/touch/ 2.在线文档:http://docs.sencha.com/touch/2.2.1/ 3.在线翻译文档:htt ...

  5. hdu1003 Max Sum(最大子串)

    https://vjudge.net/problem/HDU-1003 注意考虑如果全为负的情况,特判. 还有输出格式,最后一个输出不用再空行. #include<iostream> #i ...

  6. Deepin 15.4 更改为 阿里云源

    自带的 软件包源 不好用,卡顿严重,准备替换它: 方式一:deepin linux 如何更新或者更换软件源(注意:好像不起作用) 方式二:[推荐]利用 阿里云 提供的镜像快速更换本地的 yum 源 ( ...

  7. 对Faster R-CNN的理解(1)

    目标检测是一种基于目标几何和统计特征的图像分割,最新的进展一般是通过R-CNN(基于区域的卷积神经网络)来实现的,其中最重要的方法之一是Faster R-CNN. 1. 总体结构 Faster R-C ...

  8. 小程序学习笔记二：页面文件详解之 .json文件

       页面配置文件—— pageName.json 每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项. 页面的 ...

  9. 链接了dpdk的进程启动core在 Illegal instruction

    失败后的core栈像下面这样: Program terminated with signal SIGILL, Illegal instruction. # 0x00000000036a3fdd in ...

  10. iOS CALayer 绘图模糊有锯齿的解决方案

    在CALayer中绘制图形会出现锯齿和模糊,同样绘图在UIView中就没有问题.经查资料发现不自动处理两倍像素的情况. 解决方案为:设置layer的contentsScale属性为[[UIScreen ...