react-redux异步数据操作
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异步数据操作的更多相关文章
- for循环中进行联网请求数据、for循环中进行异步数据操作,数据排序错乱问题解决;
for循环中进行联网请求数据,由于网络请求是异步的,第一个网络请求还没有回调,第二次第三次以及后续的网络请求又已经发出去了,有可能后续的网络请求会先回调:这时我们接收到的数据的排序就会错乱:怎么才能让 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react之传递数据的几种方式props传值、路由传值、状态提升、redux、context
react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...
- react生命周期获取异步数据
当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- 聊一聊 redux 异步流之 redux-saga
让我惊讶的是,redux-saga 的作者竟然是一名金融出身的在一家房地产公司工作的员工(让我想到了阮老师...),但是他对写代码有着非常浓厚的热忱,喜欢学习和挑战新的事物,并探索新的想法.恩,牛逼的 ...
- react + redux 完整的项目,同时写一下个人感悟
先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...
- 【js】为什么要使用react+redux
前端的浪潮一叠叠袭来,带走了jQuery,带走了backbone,带来了react,带来了redux,但是面对层出不穷的前端技术,我们应该何去何从呢?近一年来笔者的也发生了同样的变化,技术栈从.net ...
- 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
随机推荐
- 14.UA池和代理池
今日概要 scrapy下载中间件 UA池 代理池 今日详情 一.下载中间件 先祭出框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - ...
- 如何弄清Linux系统运行何种系统管理程序
如何弄清Linux系统运行何种系统管理程序 虽然我们经常听到系统管理器System Manager这词,但很少有人深究其确切意义.现在我们将向你展示其区别. 我会尽自己所能来解释清楚一切.我们大多都知 ...
- PHP json_encode 中文乱码
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在编码过程中.经常会用到json_encode来处理中文.但是.出现一个问题.中文 ...
- D. Zero Quantity Maximization(hash+map)
题意:就是让c=a*x+b,给你一个a[],b[],让你尽可能多的让c[]=0,输出有多少. 思路:直接令c=0,则x=-b/a, 也就是一条直线,通过这样就用hash值使相同的k值映射到一起,使用了 ...
- 15.io流,递归
一.file的常用api 二.算法:递归1.定义:递归算法是把问题转化为规模缩小了的同类问题的子问题.然后递归调用函数(或过程)来表示问题的解.一个过程(或函数)直接或间接调用自己本身,这种过程(或函 ...
- bzoj2721 [Violet5]樱花
bzoj2721 [Violet 5]樱花 给出 \(n\) 求 \(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\) 的正整数解数量 \(\bmod (10^9+7)\) ...
- CF962F Simple Cycles Edges
CF962F Simple Cycles Edges 给定一个连通无向图,求有多少条边仅被包含在一个简单环内并输出 \(n,\ m\leq10^5\) tarjan 首先,一个连通块是一个环,当且仅当 ...
- 从code review到Git commit log
最近在读一本技术类的书:朱赟——<跃迁:从技术到管理的硅谷路径>,其中聊了很多很有趣的观点,比如:技术管理.技术实践.硅谷文化.个人成长等. 读到关于硅谷人如何做code review这一 ...
- Jmeter读取Excel,BeanShell取样器调用rt.jar和jxl.jar
将rt.jar和jxl.jar,放在\apache-jmeter-5.0\lib\ext下面 import java.io.*; import java.util.ArrayList; import ...
- CSS的插入和选择器介绍
一.认识CSS样式 1.定义 CSS全称:层叠样式表(Cascading Style Sheets) 主要作用:定义HTML内容在浏览器内的显示样式,比如文字大小.颜色.字体加粗等 优点:通过定义某个 ...