React-使用react-redux
react-redux可以方便在react中使用redux,我们就可以忘记subscribe,只需要记住reducer,action和dispatch就可以了。react-redux提供Provider和connect两个接口。
- Provider组件应该在应用最外层,传入store即可,只用一次。
- Connect负责从外部获取组件需要的参数。
- Connect可以用装饰器的方式来写。
创建stroe的时候,把原本的<Todolist/>包裹在Provider里。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './TodoList.js';
//定义一个组件,就是一段jsx
//Provider 链接了store,那么Provider里所有的组件,也都能获取到store里的内容
const App = (
<Provider store={store}>
<TodoList/>
</Provider>
);
ReactDOM.render(App, document.getElementById('root'));
在组件里导出组件的时候换种写法,要用connect。理解为让TodoList与store做链接,逻辑规则在mapStateToProps和mapDispatchToProps里定,TodoList是个ui组件,导出的是个普通组件。
mapStateToProps:mapStateToProps把store里的数据映射到组件里,变成组件的props。它接受一个state做参数,返回一个对象。
mapDispatchToProps:把store.dispatch方法映射到props上,变成组件的props。它接受接受一个dispatch 做参数,返回一个对象
import React from 'react';
import { connect } from 'react-redux';
const TodoList=(props)=>{
const { inputValue , changeInpuValue ,btnClick , list , itemDelete}=props;
return(
<div>
<input type="text" value={inputValue} onChange={changeInpuValue}/>
<button onClick={btnClick}>提交</button>
<ul>
{
list.map((item,index)=>{
return <li key={index} onClick={itemDelete}>{item} </li>
})
}
</ul>
</div>
);
};
/*mapStateToProps把store里的数据映射到组件里,变成组件的props,接受一个state做参数,返回一个对象*/
const mapStateToProps=(state)=>{
return{
inputValue:state.inputValue,
list:state.list
}
}
/*store.dispatch方法挂载到props上,组件里的props如何对store做修改,接受一个dispatch 做参数,返回一个对象*/
const mapDispatchToProps=(dispatch)=>{
return{
changeInpuValue(e){
const action={
type:'change_input_value',
value:e.target.value
}
dispatch(action)
},
btnClick(){
const action={
type:'btn_click'
}
dispatch(action)
},
itemDelete(e){
console.log(e);
}
}
}
/*让TodoListu与store做链接,规则在mapStateToProps里边*/
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
React-使用react-redux的更多相关文章
- React,关于redux的一点小见解
最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 新手级配置 react react-router4.0 redux fetch sass
前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...
- React 环境增加Redux ,React-Redux
引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用. 简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写. 更功利的表达就是: ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- React学习之redux
在阅读本文之前,希望大家对以下知识点能提前有所了解并且上好厕所(文章有点长): 状态提升的概念 react高阶组件(函数) es6基础 pure 组件(纯函数) Dumb 组件 React.js的co ...
- react学习之redux和redux-react用法
前言 redux和react-redux的关系: redux就是一个存储数据的对象,并提供了获取/设置store中的属性的解决方案,react-redux是连接react和redux桥梁的封装. ...
- react中使用redux简易案例讲解
为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...
- [RN] React Native 使用 Redux 比较详细和深刻的教程
React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...
- React项目使用Redux
⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...
随机推荐
- Git应用—03分支管理和冲突解决(转载)
Git 分支管理和冲突解决 https://www.cnblogs.com/mengdd/p/3585038.html 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. ...
- Visualforce控制器
Visualforce框架是遵循MVC结构的.Visualforce页面代表了"视图"部分,Salesforce的各种对象代表了"模型"部分,而Apex则代表了 ...
- C++知识回顾之__stdcall、__cdcel和__fastcall三者的区别
__stdcall.__cdecl和__fastcall是三种函数调用协议,函数调用协议会影响函数参数的入栈方式.栈内数据的清除方式.编译器函数名的修饰规则等. 调用协议常用场合 __stdcall: ...
- 移植marvell poncat3 demo板的总结
1.arm cpu自带的bootrom, 已经初始化好串口.SPI等外设,只要硬件设置好从SPI FLASH启动,则cpu自带的bootrom会自动打印出一些信息,显示出从SPI FLASH启动,驱动 ...
- 【redis专题(2)】命令语法介绍之string
REDIS有5大数据结构:string,link,sortedset,sets,hash. 这5个结构我将用5篇文章来记录各自是怎么用的,然后再用一篇文章来说一下各自的应用场景: 更多语法请参考: h ...
- javascript避免dom事件重复触发
/** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...
- 【PAT】B1084 外观数列(20 分)(纯C)
第一层循环,用来循环计算第几个元素 第二层用来计算当前元素的下一个 #include<stdio.h> #include<string.h> char aaa[100000] ...
- ccf-20170303--Markdown
我的想法如下图: 代码和题目如下: 问题描述 试题编号: 201703-3 试题名称: Markdown 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 Markdown 是一 ...
- IntelliJ IDEA 项目结构旁边出现 0%classes,0% lines covered
不知道一不小心点到哪里,项目变成如下形式 使用ctrl + Alt + F6弹出如下框,取消勾选-->点击Show Selected就可以去掉了 官网解释
- centos 上安装phpstorm
phpstorm在centos上运行依赖JDK,所以先安装JDK环境. 假如是centos自带的openjdk,直接卸载,不支持phpstorm. 下载jdk-7u45-linux-i586.tar. ...