最近在学习胡子大哈的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. Android Studio 2.3 解决小米手机调试安装apk失败问题

    在开发者选项里面,拉到底,把miui优化选项去掉就好了. 参考资料 [问题反馈] Android Studio 2.3 在红米note3手机中 调试安装Apk失败

  2. Python标准库12 数学与随机数

    想用高斯分布生成随机数,在网上看到很强大的总结,保留一下,以备后用 https://www.cnblogs.com/vamei/archive/2012/10/26/2741702.html

  3. pygame 笔记-4 代码封装&发射子弹

    继续之前的内容,随着游戏的内容越来越复杂,有必要把代码优化一下,可以参考OOP的做法,把人物类抽象出来,弄成一个单独的类,这们便于代码维护,同时我们给小人儿,加个发射子弹的功能,代码如下:(看上去略长 ...

  4. MySql的优化步骤

    MySql优化的一般步骤: 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以”Com”开头的指令 sho ...

  5. .net core使用配置文件

    .net core使用配置文件 在 .net core中,配置文件的读取是通过IConfiguration来提供的,程序集是Microsoft.Extensions.Configuration,对应的 ...

  6. 编写支持SSR的通用组件指南

    原文来自:https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon? utmcampaign=Vu ...

  7. linux平台下Tomcat的安装与优化

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...

  8. jquery监测文本框变化

    $("#mobile").on('keyup paste blur', function () {            var mobile = $(this).val();   ...

  9. ionic使用iframe时无法显示网页或报错

    ionic使用iframe时无法显示网页或报错 Uncaught DOMException: Blocked a frame with origin 在config.xml中添加 <access ...

  10. InfluxDB源码阅读之httpd服务

    操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 服务模块介绍 源码路径: github.com/influxda ...