通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧

全选

1、声明状态,这个是全选状态

2、action约定

3、reducers,更新store

4、底层组件实现函数

5、上层组件数据传递

到这里全选的功能就实现了

显示action的数量和删除completed操作

整过过程一模一样

1、

2、

3、

4、(展示action数量的view)

(删除completed的view)

放到Footer中

在上层父组件进行数据通信

最终的父组件(view)

整个过程就是这样简单,明了!

到这里官方的TodoList所有功能就实现了!其实做到这样一个看似简单,其实一点不简单的小项目,关键是掌握redux语法,react组件之间的通信,还有就是基本的语法,逻辑了,很多ES6的语法和一些不怎么常见的我在里面都有住注释,里面全是截图,我的初衷是,大家要先看懂,不要一看到一点就跟着写,这样即使你写出了效果,也不见得你掌握了,因此你需要先理解,再写,这样写起来也很轻松,我刚开始也是,看到一个教程就马上跟着写,写着写着就出问题了,就去对代码,其实这个习惯不好,理解后再去写,会大大加快你的学习进度!

react+redux还有很多高级的功能等着我们区发掘,其实到现在我感觉自己就是刚刚入门,记录一下这灵光一闪的时刻,大家共勉!希望有幸看到这系列文章的同志对其有所帮助!!!

react+redux官方实例TODO从最简单的入门(6)-- 完结的更多相关文章

  1. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  2. react+redux官方实例TODO从最简单的入门(5)-- 查

    上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...

  3. react+redux官方实例TODO从最简单的入门(2)-- 增

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  4. react+redux官方实例TODO从最简单的入门(4)-- 改

    上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要 ...

  5. react+redux官方实例TODO从最简单的入门(3)-- 删

    上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.i ...

  6. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  7. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  8. 用react+redux写一个todo

    概述 最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. win10+vs2013+cuda8.0+caffe

    1,首先说下环境和配置 配置: 环境:windows10,vs2013 community,cuda8.0,caffe,cudnn4 注意:先要安装好显卡驱动(我的显卡是1070),这里的例子只开通了 ...

  2. ElasticSearch第四步-查询详解

    ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSea ...

  3. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...

  4. Python中用format函数格式化字符串

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式 语法:%[( ...

  5. [HTML5] Blob对象

    写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...

  6. 从点云到网格(二)VRIP介绍

    VRIP(Volumetric Range Image Processing),顾名思义,是从深度图重建网格的一种方法.VRIP是Brian Curless和Marc Levoy在1996年提出来的方 ...

  7. python读取caffemodel文件

    caffemodel是二进制的protobuf文件,利用protobuf的python接口可以读取它,解析出需要的内容 不少算法都是用预训练模型在自己数据上微调,即加载"caffemodel ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. UVA 624CD(01背包输出 + 输出路径)

    You have a long drive by car ahead. You have a tape recorder, but unfortunately your best music is o ...

  10. Windows bat脚本学习(1)

    基础 首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 ...