最近在学习胡子大哈的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. yii动态配置International(Yii::t())

    Yii:t()的动态配置 \Yii::$app->i18n->translations['categoryName*'] = [ 'class' => 'yii\i18n\PhpMe ...

  2. django部署admin后台static文件丢失问题解决

    settings.py 中进行设置 设置static文件目录 STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\','/') 运行命令 ...

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

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

  4. Linux目录/usr缩写及目录结构说明

    在 linux 文件结构中,有一个很神奇的目录 —— /usr.   讨论中,大部分观点认为:   usr 是 unix system resources 的缩写: usr 是 user 的缩写: u ...

  5. nltk 的分词器punkt： ssl问题无法下载

     报错: LookupError: ********************************************************************** Resource pu ...

  6. Gcode命令【转】

    https://www.jianshu.com/p/f8a328457a45 简述 研究过3D打印机的朋友,都会用到G-code文件.要使用3D打印机打印东西要经过几个步骤:        1.创建3 ...

  7. JS对HTML字符的转义

    function htmlEscape(str){ var s = ""; if(str.length == 0) return ""; s = str.rep ...

  8. 访问天地图WMTS服务的正确姿势

    天地图2018版对天地图应用开发流程进行了升级改造,主要有两点变化: (1)接口升级为tianditu.gov.cn政府域名,支持HTTP/HTTPS协议,原有服务域名tianditu.com继续保留 ...

  9. ionic 锁定方向 禁止横屏 orientation

    安装插件 cordova-plugin-screen-orientation ionic cordova plugin add cordova-plugin-screen-orientation 添加 ...

  10. JSONObject、JSONArray、Map、JavaBean的相互转换

    1,JSONObject json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} 2,JSONArray json数组,使用中括号[ ],只不过数组里面的项也是json键 ...