首先给大家普及一个方法:

let data = [
{id:1,text:'手机',check:false},
{id:2,text:'电脑',check:false},
{id:3,text:'平板',check:true}
]
data.map((val)=>{
if(val.id != 3){
return val
}

return 1

})
return 1,相当于else的情况;

Object.assign(val,{check:!val.check})
val,后面的对象会把前面的对象那个给覆盖掉,如果

state.map((item)=>{
if(item.id != action.payload.id){
return item
}
console.log(item)
return Object.assign(item,{check:!item.check})
});
如果这样做的话返回的就是id等于那个的中的check属性,变成相反的后,和id不等于的对象
 
接下来讲redux,先声明下我要做的是一个这样的功能如图:

首页是显示全部任务,切换代办任务的话就是显示没有选中的任务,选中已完成任务的话就是显示的是已经选中的任务;

我们第一次操作(也就是组建其实是在index.js里面的),用到redux的话我们需要在index.js中引入连接器

import {connect} from 'react-redux';

其次在index.js中写入  
@connect(
  (state)=>({

    todoList:state.todoList,

  })

)
写到这我们应该想到一个问题在组件中操作后比如调用一个方法都会进到我们新建的文件夹中的,redux--->actions里面的todoList.js这里面有

import {createAction} from 'redux-actions'

todoList.js里面有我们创建的actions名字,

action------->reduces文件夹下

还记得刚才的@connect的吗,里面有什么,里面不是有个todoList

那么正式写reducer逻辑的时候必然会输出一个todoList,我们想一想其实他就是画了一个圆圈,从组建中的@connect开始-------

通过组建内事件的出发比如

this.props.dispatch(addTask({})),这里的addTask就是actions里面的方法,------>reducer------>todoLists------->@connect

react-redux简单的记事本应用的更多相关文章

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

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

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

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

  3. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  4. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  5. 重写官方TodoList,对于初学react+redux的人来说,很有好处

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

  6. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  7. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  8. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  9. 【原】react+redux实战

    摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...

  10. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

随机推荐

  1. EffectiveC++ 第5章 实现

    我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 5 实现 Implementations 适当提出属于 ...

  2. Web从入门到放弃<4>

    1,插入 如下html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. C++设计模式——访问者模式

    访问者模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对访问者模式是这样说的:表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的 ...

  4. Docker镜像保存save、加载load(外网转移至内网)

    (1)查看要要保存的镜像的ID [root@localhost docker]# docker images (2)保存镜像 [root@localhost docker]# docker save  ...

  5. [C][变量作用域]语句块

    概述 C语言作用域有点类似于链式结构,就是下层能访问上层声明的变量,但是上层则不能访问下层声明的变量: #include <stdio.h> #define TRUE 1 int main ...

  6. Windows平台下结合 tortoiseSVN 和 VisualSVN Server 搭建SVN服务器并实现 web 站点同步

    1. tortoiseSVN 关于 tortoiseSVN 的安装使用详见博文 TortoiseSVN的安装及其简单使用. 2. VisualSVN Server 关于 VisualSVN Serve ...

  7. liunx mysql 备份

    执行命令:mysqldump -uroot -p lanwei > lanwei2018-08-02.sql 出错 -bash: mysqldump: command not found 查看m ...

  8. 【深度学习】吴恩达网易公开课练习(class2 week1 task2 task3)

    正则化 定义:正则化就是在计算损失函数时,在损失函数后添加权重相关的正则项. 作用:减少过拟合现象 正则化有多种,有L1范式,L2范式等.一种常用的正则化公式 \[J_{regularized} = ...

  9. 在node中使用MongoDB

    1.下载安装包,进行安装: https://www.mongodb.com/download-center/community 参考网址:https://www.cnblogs.com/ymwange ...

  10. Web微信模拟

    一.概要 目的:实现一个具有web微信类似功能的项目 框架:Django 模块:render.HttpResponse.BeautifulSoup.re.time.requests.json.rand ...