如何使用react-redux
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux'; const App = (
<Provider>
<TodoList />
</Provider>
) ReactDOM.render(App, document.getElementById('root'));
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store'; const App = (
<Provider store={store}>
<TodoList />
</Provider>
) ReactDOM.render(App, document.getElementById('root'));
import React, { Component } from 'react';
import { connect } from 'react-redux'; class TodoList extends Component{
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange = { this.props.changeInputValue}/>
<button>提交</button>
</div>
<ul>
<li></li>
</ul>
</div>
)
}
}
/**
* 这个意思是让TodoList这个组件和store进行连接。所以connect方法是做连接。
* 要连接就有连接的方式,所以第一个参数mapStateToProps
* 他的意思是TodoList与store做连接就有一个规则,规则在哪里,规则在mapStateToProps里面
*/
//mapStateToProps,把store里面的数据映射给这个组件,并变成组件的props. 而参数state就是指store里面的数据。
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue
}
} /***
* 我让Todolist这个组件跟store做关联,store里面的数据会映射到props上面
* 同时如果我想对store的数据做修改,也可以通过store的props来做修改
* mapDispatchToProps,dispatch,派发,把store的dispatch方法挂载到props上
*
*/
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e){
const action = {
type: 'change_input_value',
value: e.target.value
}
dispatch(action);
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
如何使用react-redux的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript
常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
- oracle OEM安装(一)
01,用户解锁添加密码 [oracle@oracle01 ~]$ sqlplus / as sysdba SQL Production :: Copyright (c) , , Oracle. All ...
- jqGrid 将行的字变成超连接
今天在项目中碰到要将jqGrid中的行做成超连接,请看代码步骤: name: , align: "left", formatter: function (cellValue, op ...
- mysql中时间日期函数
转自:mysql 中 时间和日期函数 一.MySQL 获得当前日期时间 函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now(); +- ...
- 从数组去重这个函数来体验es6的高效率
前几天碰到一个题目,要求是这样的. 题目描述 为 Array 对象添加一个去除重复项的方法 示例1 输入 [false, true, undefined, null, NaN, 0, 1, {}, { ...
- SQL使用bcp方式导入,导出数据2
select * from A_Account EXEC sp_configure 'allow_updates' GO EXEC sp_configure 'allow_updates',0; ...
- stark——增删改页面
一.制作添加页面 1.前置准备 (1)修改增删改的视图函数名 class ModelStark(object): def add_view(self, request): return HttpRes ...
- jq实现发送验证码倒计时60s
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. setTimeout() :在指定的毫 ...
- 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale
AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...
- linux环境下安装jdk(本文示例是jdk1.6.0_45)
第一步:创建一个文件夹安装jdk(虽说地址一般自定义,但是为了方便查找请按照笔者建议目录 ):/usr/java 将jdk-6u45-linux-x64.bin文件放到 /usr/java 文件夹 ...