最近在学习胡子大哈的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. Java 关键字 static

    关键字static作用如下: 1. 为某个基本数据类型或对象分配单一的存储空间. 2. 实现某个属性或方法与类关联.在类被加载后类名可以直接调用静态成员方法(下面简称静态方法)或者访问静态成员变量(下 ...

  2. h5新增属性

    localStorage,sessionStorage,video,audio的使用方法 <!DOCTYPE html> <html lang="en"> ...

  3. 初学JDBC的一些总结（一）

    1.关于JDBC的的个人理解: JDBC(Java Data Base Connectivity,java 数据库连接)是用于执行 SQL 语句的 JavaAPI,可以为多种关系型数据库提供统一的访问 ...

  4. linux 修改时间和时区

    linux系统时间有两个,一个是硬件时间,即BIOS时间,就是我们进行CMOS设置时看到的时间,另一个是系统时间,是linux系统Kernel时间.当Linux启动时,系统Kernel会去读取硬件时钟 ...

  5. 几个例子弄懂JS 的setTimeout的运行方式

                        function test() {   var a = 1;   setTimeout(function() {     alert(a);     a = 5 ...

  6. flask之SQLAlchemy

    本篇导航: 介绍 使用 SQLAlchemy-Utils 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之 ...

  7. 一款开源免费的WPF图表控件ModernuiCharts

    一款简洁好看的Chart控件  支持WPF.silverlight.Windows8  ,基本够用,主要是开源免费的.(商业控件ComponentOne for WPF要4w多呢) This proj ...

  8. new Random().Next(1, 100); 多线程同时执行结果很高概率相同，

    /// <summary> /// new Random().Next(1, 100); 多线程同时执行结果很高概率相同, /// 是用的当前时间为seed,时间相同结果相同 /// // ...

  9. linux bash timeout

    http://www.digitalinternals.com/unix/unix-linux-run-command-with-timeout/500/ There are two ways to ...

  10. 使用Canvas制作画图工具

      前  言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...