通过实现了增-->删-->改-->查，对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. [LeetCode] Closest Binary Search Tree Value II 最近的二分搜索树的值之二

    Given a non-empty binary search tree and a target value, find k values in the BST that are closest t ...

  2. [LeetCode] Substring with Concatenation of All Words 串联所有单词的子串

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  3. Laravel增删改查语句总结

    <?php Class Que { /* * 查询: */ public function index() { $users = User::query()->paginate(20); ...

  4. 常用的shell脚本

    [root@WEB1-live sh]# cat licai_fabu.sh #!/bin/bash pid=` ps -ef | grep java | grep '8011' | awk '{pr ...

  5. 使用TortoiseGit对android studio工程进行代码版本控制

    阅读下列文章时请保证你是否有以下工具: 1.Android Studio 2.TortoiseGit 和 msysGit 安卓工程版本控制哪些文件可以忽略 可以省略的文件如下: 目录 .gradle  ...

  6. linux 常见命令

    redhat 1.获取apt软件列表 sudo apt-cache search all 2.添加用户并创建目录 sudo useradd -m username -s /sbin/bash 3.vs ...

  7. staxon实现json和xml互转

    pom.xml: <dependency> <groupId>de.odysseus.staxon</groupId> <artifactId>stax ...

  8. oracle存储过程

    1.存储过程定义 储存程序 (Stored Procedure),又可称预储程序或者存储过程,是一种在数据库中存储复杂程序,以便外部程序调用的一种数据库对象,它可以视为数据库中的一种函数或子程序.-- ...

  9. POJ 3204 Ikki's Story I - Road Reconstruction

    Ikki's Story I - Road Reconstruction Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 7 ...

  10. Git怎样撤销一次分支的合并Merge

    出现的问题: 某一天,所有的开发文件已经在development分支上,但是这时候,线上出了一个问题,需要及时修复,于是从master分支上,拉了一个bug分支,进行处理,master分支本应合并bu ...