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. ORC Creation Best Practices

    Short Description: ORC Creation Best Practices with examples and references. Article Synopsis. ORC i ...

  2. 看Linux 之父是如何定义 Linux?

    看Linux 之父是如何定义 Linux? LINUX是什么? LINUX是一个免费类unix内核,适用于386-AT计算机,附带完整源代码.主要让黑客.计算机科学学生使用,学习和享受.它大部分用C编 ...

  3. 如何合并列表中key相同的字典?

    现有list: list1 = [{a: 123}, {a: 456},{b: 789}] 合并成: list2 = [{a: [123,456]},{b: [789]}] from collecti ...

  4. UVA1607-Gates(思维+二分)

    Problem UVA1607-Gates Accept: 111  Submit: 767Time Limit: 3000 mSec Problem Description Input The fi ...

  5. [HEOI2016/TJOI2016]排序

    嘟嘟嘟 首先这题的暴力是十分好写的,而且据说能得不少分. 正解写起来不难,就是不太好想. 根据做题经验,我想到了给这个序列转化成01序列,但是接下来我就不会了.还是看了题解. 因为查询只有一个数,所以 ...

  6. 【转】OS X Base System 上没有足够的空间来进行安装

    今天在windows环境下安装IOS虚拟机,安装过程中报了一个错:“OS X Base System ”上没有足够的空间来进行安装.如图: 之后的解决办法是:点击上方的[实用工具]->[磁盘工具 ...

  7. 【转】FFmpeg获取DirectShow设备数据(摄像头,录屏)

    这两天研究了FFmpeg获取DirectShow设备数据的方法,在此简单记录一下以作备忘.本文所述的方法主要是对应Windows平台的. 1.       列设备 ffmpeg -list_devic ...

  8. 微信硬件平台(一) 公众号 ESP8266 Arduino LED

    微信硬件平台 本文目的,使用微信公众号控制ESP8266的LED开和关.进一步使用微信当遥控器(避免写APP或者IOS或者小程序),控制一切设备.给两个关键的总教程参考. 官网教程  微信硬件平台 微 ...

  9. mount --bind使用方法

    我们可以通过mount --bind命令来将两个目录连接起来,mount --bind命令是将前一个目录挂载到后一个目录上,所有对后一个目录的访问其实都是对前一个目录的访问,如下所示: ## test ...

  10. ORA-08104

    https://blog.csdn.net/daiqiulong2 create index idx_p_merchant_detail_id on D_ORDER_DETAIL (merchant_ ...