最近在学习胡子大哈的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. egret获取本周，上周，今天，昨天，明天，现在时间,今年，本月

    class TimerShow extends egret.DisplayObjectContainer{ private now = new Date(); //当前日期 private nowDa ...

  2. NodeJS多进程

    NodeJS多进程 Node以单线程的方式运行,通过事件驱动的方式来减少开销车,处理并发.我们可以注册多进程,然后监听子进程的事件来实现并发 简介 Node提供了child_process模块来处理子 ...

  3. Python的JAVA胶水——jpype

    Python的JAVA胶水--jpype python可以作为一门胶水语言使用,可以用其它语言的优势来弥补自身如性能方面的不足,jpype就是在Python中使用jvm的第三方库 文档在这里 安装 s ...

  4. Python内置GUI模块Tkinter的几点笔记

    组件属性,用法 组件位置 更多

  5. java基础知识总结--对象的克隆

    前提:在Java语言中所有的类的都是缺省的继承Java语言中的Object类的, protected native Object clone() throws CloneNotSupportedExc ...

  6. django之Ajax续

    接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...

  7. IT职业后半段发展问题

    忆: 八年前,当我结束第二份工作,寻求第三份工作的时候,我就有了一个疑惑,IT职场上45岁以上或是50岁以上的人去哪了,我去请教以前的老领导,他告诉我有一些转行了,有一些他也不清楚,我的老领导也就比我 ...

  8. How to do conditional auto-wiring in Spring?

    ou can implement simple factory bean to do the conditional wiring. Such factory bean can contain com ...

  9. Introducing XAML Standard and .NET Standard 2.0

    XAML Standard We are pleased to announce XAML Standard, which is a standards-based effort to unify X ...

  10. Go语言栈定义及相关方法实现

    // stack 栈 package Algorithm import ( "errors" "reflect" ) // 栈定义 type Stack str ...