import React, { Component } from 'react';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import action from './react-redux/todos/action'
// ui 组件 只取数据
class App extends Component {
constructor(props){
super(props);
this.add = this.add.bind(this)
};
add(){
this.props.ADD(this.node.value);
this.node.value = '';
};
render() {
console.log(this.props)
return (
<div className="App">
<input type="text" ref={node=>this.node=node}/>
<button onClick={this.add}>add</button>
{this.props.todos.list.map((item,index)=>{
return (
<div key={index}>
{item}
</div>
)
})}
</div>
);
}
}
let mapStateToProps = (state)=>state;
// 将dispatch传进去省区了actions 里的方法去 触发action的内置对象
let mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
//高阶组件 必须传组件进去
export default connect(mapStateToProps,mapDispatchToProps)(App);

react-redux异步数据操作的更多相关文章

  1. for循环中进行联网请求数据、for循环中进行异步数据操作,数据排序错乱问题解决;

    for循环中进行联网请求数据,由于网络请求是异步的,第一个网络请求还没有回调,第二次第三次以及后续的网络请求又已经发出去了,有可能后续的网络请求会先回调:这时我们接收到的数据的排序就会错乱:怎么才能让 ...

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

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

  3. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  4. react生命周期获取异步数据

    当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...

  5. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  6. 聊一聊 redux 异步流之 redux-saga

    让我惊讶的是,redux-saga 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...

  7. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  8. 【js】为什么要使用react+redux

    前端的浪潮一叠叠袭来,带走了jQuery,带走了backbone,带来了react,带来了redux,但是面对层出不穷的前端技术,我们应该何去何从呢?近一年来笔者的也发生了同样的变化,技术栈从.net ...

  9. 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

    先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...

随机推荐

  1. mysql统计一年12月的数据

    效果图: select end) as 一月份, end) as 二月份, end) as 三月份, end) as 四月份, end) as 五月份, end) as 六月份, end) as 七月 ...

  2. Lingo求解线性规划案例4——下料问题

    凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 造纸厂接到定单,所需卷纸的宽度和长度如表 卷纸的宽度 长度 5 7 9 10000 30000 20000 工 ...

  3. (转)Spring Boot(二):Web 综合开发

    http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html 上篇文章介绍了 Spring Boot 初级教程:Spring ...

  4. Linux之文件属性

    文件属性是什么? [root@luffy_boy-001 /]# ls -lhi /etc/hosts 129822 -rw-r--r--. 2 root root 198 Jan 11 2019 / ...

  5. 重新安装liteide后无法关联.go文件的解决办法(及更改liteide配色方案)

    现象:双击.go文件,从打开方式中选择新安装的liteide.exe无效. 解决办法: 打开regedit 找到HKCU\Software\Classes\go_auto_file 发现下面有shel ...

  6. 分享一个前后端分离的web项目(vue+spring boot)

    Github地址:https://github.com/smallsnail-wh 前端项目名为wh-web 后端项目名为wh-server 项目展示地址为我的github pages(https:/ ...

  7. 【转】Android中dip(dp)与px之间单位转换

    Android中dip(dp)与px之间单位转换 dp这个单位可能对web开发的人比较陌生,因为一般都是使用px(像素)但是,现在在开始android应用和游戏后,基本上都转换成用dp作用为单位了,因 ...

  8. hadoop学习笔记肆--元数据管理机制

    1.首先,认识几个名词 (1).NameNode中读.写.以及DataNode映射等信息叫做“元数据” ,NameNode元数据存放位置有.内存.fsimage.edits log三个位置. (2). ...

  9. python 自动获取星期

    自动获取星期: >>> from time import time,localtime,strftime>>> x=localtime(time())>> ...

  10. UOJ236 IOI2016 Railroad 差分、欧拉回路、最小生成树

    传送门 将"进入路段时速度\(\leq s_i\)"转换为:"进入路段时速度恰好等于\(s_i\),并且铺设铁轨有加速和减速两种,加速无需代价,减速每\(1 km/h\) ...