最近在学习胡子大哈的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. JS内存管理

    背景: 分配给Web浏览器的内存通常比分配给电脑桌面的内存少,因为担心运行JS的网页耗尽全部系统内存而导致系统崩溃 内存限制问题不仅影响给变量分配内存,还会影响调用栈以及在一个线程中能够同时执行的语句 ...

  2. redis:set集合类型的操作(无序集合)

    1. set集合类型的操作(无序集合) 集合具有无序性(没有顺序).确定性(描述是确定的).唯一性(没有重复的元素) 1.1. sadd key member [member ...] 语法:sadd ...

  3. 浅谈AJAX基本实现流程

    1.js中ajax实现流程: (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3) 设置 ...

  4. JAVA自学笔记21

    JAVA自学笔记21 1.转换流 由于字节流操作中文不是非常方便,因此java提供了转换流 字符流=字节流+编码表 1)编码表 由字符及其对应的数值组成的一张表 图解: 2)String类的编码和解码 ...

  5. hdu1847 Good Luck in CET-4 Everybody!(巴什博弈)

    http://acm.hdu.edu.cn/showproblem.php?pid=1847 从1开始枚举情况,找规律.1先手胜2先手胜3先手败4先手胜5先手胜... n只要能转移到先手败,就可以实现 ...

  6. Visual Studio 2015 没显示可用的.Net Framework版本

    安装了VS 2015企业版, 然后在创建工程的时候遇到了一个问题: 当我选择Framework版本时候, 列表是空的, 如下图所示: 是生成工具出现了问题,所以尝试又安装了下 "Micros ...

  7. GPG(GnuPG)入门

    GPG(GnuPG)入门 下载: https://gnupg.org/download/index.html 或者 http://www.hellopp.cn/page/5b9a1405c3f1f7d ...

  8. SSE图像算法优化系列二十四: 基于形态学的图像后期抗锯齿算法--MLAA优化研究。

    偶尔看到这样的一个算法,觉得还是蛮有意思的,花了将近10天多的时间研究了下相关代码. 以下为百度的结果:MLAA全称Morphological Antialiasing,意为形态抗锯齿是AMD推出的完 ...

  9. iOS/MAC 数据压缩与解压缩及常用算法 LZMA、ZLIB

    苹果提供的常用的数据压缩算法LZMA.ZLIB.LZ4等: 这三种算法也是苹果建议的,可跨平台使用: 定义如下: /* Commonly-available encoders */ COMPRESSI ...

  10. How to trigger a Kubernetes cronjob manually-手动触发一个cronjob

    What should you do when you’ve developed and installed a cron job for your Kubernetes application, a ...