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. February 12th, 2018 Week 7th Monday

    One man's fault is another man's lesson. 前车之覆,后车之鉴. We make mistakes every day, large or small, fail ...

  2. 【Git】Git pull 强制覆盖本地文件

    git fetch --all  git reset --hard origin/master git pull 备注: git fetch 只是下载远程的库的内容,不做任何的合并 git reset ...

  3. linux历史命令查找快捷方式

      一.回到上次操作的目录# cd -进入上次访问目录 二.历史命令搜索操作快捷键:[Ctrl + r], [Ctrl + p], [Ctrl + n] 在终端中按捉 [Ctrl] 键的同时 [r] ...

  4. 解决Zabbix网页端Get value error: cannot connect to [[192.168.238.139]:10050]: [113] No route to host问题

    在安装配置完zabbix_agentd以后,网页端出现  Get value error: cannot connect to [[192.168.238.139]:10050]: [113] No ...

  5. SQlite源码分析--源网站

    http://huili.github.io/B-treeImplementation/hierarchicalorganization.html SQLite中的B-tree SQLite中每个数据 ...

  6. Sqlite3并发读写注意事项

    最近项目中涉及到sqlite并发读写的问题,参考一些文档并结合自己的实践,对sqlite3并发问题总结了几点: sqlite3的锁及事务类型 sqlite3总共有三种事务类型:BEGIN [DEFER ...

  7. Rsync服务实战

    目录 1 安装rsync软件 2 配置 /etc/rsyncd.conf 3 创建用户(运行rsync服务的用户身份) 4 创建虚拟用户密码文件(客户端连接时候使用) 5启动 rsync 服务,并加入 ...

  8. PHP 3 函数

    PHP 的真正力量来自它的函数:它拥有超过 1000 个内建的函数. PHP 用户定义函数 除了内建的 PHP 函数,我们可以创建我们自己的函数. 函数是可以在程序中重复使用的语句块. 页面加载时函数 ...

  9. Redis 实现安全队列

    Redis的列表数据结构可以让我们方便的实现消息队列 例如用 LPUSH(BLPUSH)把消息入队,用 RPOP(BRPOP)获取消息 绝大部分的情况下,这些操作都是没问题的,但并不能保证绝对安全 当 ...

  10. 破解windows版idea

    近期使用idea的时候提示已过试用期,需要购买,否则只能使用半小时 网上破解方法很全,记录一下 1.下载破解补丁 百度网盘:https://pan.baidu.com/s/15Wq9-c4SVwg_2 ...