更改了react-redux 官方网站的todolist结构
最近在学习胡子大哈的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结构的更多相关文章
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- react+redux官方实例TODO从最简单的入门(2)-- 增
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux官方实例TODO从最简单的入门(5)-- 查
上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...
- react+redux官方实例TODO从最简单的入门(4)-- 改
上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要 ...
- react+redux官方实例TODO从最简单的入门(3)-- 删
上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.i ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux+generation-modation脚手架添加一个todolist
当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...
- react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...
随机推荐
- kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...
- 关于js函数对象的理解
js中函数和对象的关系: 什么是对象?根据W3C上面的解释JS中所有事物都是对象,对象是拥有属性和方法的数据,由此可以看出除了基 本值类型不是对象(number.string.Boolean.Unde ...
- Ubuntu1404安装eclipse(目的是为了运行python,当然java更可以)
原创文章,不得转载 我是彩印网(www.caiyin.com) 的技术开发人员,在这里首先请允许我做下业务的介绍 彩印网是由北京出彩电子商务有限公司运营的专业印刷电商,集线上购物.支付.设计.制作.配 ...
- ArcGIS中国工具,版权声明,本人没有授权任何单位和个人销售,其他都是盗版,为了你个人和单位利益,请勿购买。 销售QQ:27652980,853740877,电话:18987281928,13108507190,qq群310964401
ArcGIS中国工具,版权声明,本人没有授权任何单位和个人销售,其他都是盗版,为了你个人和单位利益,请勿购买.销售QQ:27652980,853740877,电话:18987281928,131085 ...
- AssemblyInfo.cs文件详解
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq395537505/article/details/49661555 一.前言 .net工程的Pr ...
- 网卡最大传输单位MTU和巨型帧(Jumbo frame)设置
1. 背景:在1998年,Alteon Networks 公司提出把Data Link Layer最大能传输的数据从1500 bytes 增加到9000 bytes,这个提议虽然没有得到IEEE 80 ...
- EditPlus 自用正则替换
分享下自己用EditPlus 的一些些正则技巧,editplus版本v3.5.1 1.替换a标签链接地址为空 例如: 把所有的 1 <a href="..囧.."> 替 ...
- 构建自己的 Smart Life 私有云(二)-> 连通 IFTTT & Slack
博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...
- Jenkins自动部署增加http状态码校验
公司推进Jenkins自动化部署,因为web站点都是集群部署,部署需要测试指定服务器web服务是否成功启动,页面是否正常访问,经过不断baidu发现,python的request模块可以很好的解决这一 ...
- fastcgi php-cgi与php-fpm区别和之间的关系
关于FastCGI.php-cgi.php-fpm的区别是什么,各自有什么用途,以及相互间的关系是什么,查阅相关资料,可谓是众说纷纭,莫衷一是: 说法一:fastcgi是一个协议,php-fpm实现了 ...