十二、react-reudx之@connect 摆脱redux的繁琐操作
如果对redux的概念和用法掌握的已经不错了 那么现在react-redux会让你的操作更加的得心印手
忘记subscribe,记住reducer,action和dispatch即可
React-redux提供Provider和connect两个接口来链接
这里我们还是用一个计数器来讲解
- 第一步安装
$ npm install react-redux --save
- React-redux具体使用
Provider组件在应用最外层,传入store即可,只用一次
index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App'
//导入reducer 和actionCreator
import {counter} from './index.redux.js'
//导入createStore 的方法从redux当中 并且从redux当中导入处理中间件的方法applyMiddleware
import { createStore,applyMiddleware,compose} from 'redux';
//这里导入处理redux的中间件专门处理redux的异步问题 因为本身redux是同步的
//导入react-redux中的provider
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
/**使用createStor(reducer)方法生成store
* 添加applyMiddleware(thunk)方法来处理thunk中间件来达到处理异步的效果
* compose是用来组合createStore当中的多个方法
*/
const store= createStore(counter,compose(
applyMiddleware(thunk),
window.devToolsExtension?window.devToolsExtension():f =>f
))
ReactDom.render(
( //这里store 只需要在Provider上传入一次即可
<Provider store={store} >
<App />
</Provider>
),
document.getElementById('root'))
Connect负责从外部获取组件需要的参数
App.js
import React from 'react';
import { connect } from 'react-redux'
import {add_A,rem_R,addAsync} from './index.redux.js'
class App extends React.Component{
constructor(props){
super()
}
render(){
return (
<div>
<h1>现在是数字几{this.props.num}</h1>
{/*使用了connect之后这里不需要在手动的dispatch了直接调用即可*/}
<button onClick={this.props.add_A}>加</button>
<button onClick={this.props.rem_R}>减</button>
{/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
<button onClick={this.props.addAsync}>等两秒再加</button>
</div>
)
}
}
//接收store赋值给组件内部的props
const mapStatetoProps = (state) =>{
return {num:state}
}
//将store当中的所有的actionCreator放入actionCreators
const actionCreators = {add_A,rem_R,addAsync}
//将App传入connect当中 将所有的函数和参数都给到App 生成一个新的App 组件内部通过this.props即可获取 传入的参数和方法
App = connect(mapStatetoProps,actionCreators)(App)
export default App
这份代码是actionCreator和reducer 主要改变的代码都在
index.reduer.js
//创建常量
const ADD_N = "加"
const REM_N = "减"
//创建reducer 根据老的state和action 生成新的state
export const counter=(state=0,action)=>{
switch (action.type) {
case ADD_N:
return state+1
case REM_N:
return state-1
default:
return 10
}
}
//action creator
export const add_A=()=>{
return {type:ADD_N}
}
export const rem_R=()=>{
return {type:REM_N}
}
export const addAsync=()=>{
//这里返回的是一个箭头函数 因为只有dispatch一个参数所以省略括号
return dispatch=>{
//这里的方法回两秒之后执行
setTimeout(() => {
//两秒之后执行dispatch发布add_A这个actionCreator
dispatch(add_A())
}, 2000);
}
}
如果上面的基础用法你已经学会了那么再看看下面@connect注解的方法吧
使用装饰器优化connect代码
1、弹出个性化配置(因为很多的配置被react的脚手架隐藏了起来 这一步就是了展开,这个操作是不可逆的)
$ Npm run eject
2、安装依赖的插件
$ npm install babel-plugin-transform-decorators-legacy插件
3、完成上一步操作在Package.json里babel加上plugins配置 "plugins":["transform-decorators-legacy"]
"babel": {
"presets": [
"react-app"
],
"plugins":["transform-decorators-legacy"]
},
上面的步骤都完成了话就可以用@connect注解的方法来优化我们的App.js啦
App.js
import React from 'react';
import { connect } from 'react-redux'
import {add_A,rem_R,addAsync} from './index.redux.js'
/**没使用@conncet注解方式之前的实现
* 接收store赋值给组件内部的props
* const mapStatetoProps = (state) =>{
* return {num:state}
*}
*将store当中的所有的actionCreator放入actionCreators
*const actionCreators = {add_A,rem_R,addAsync}
*将App传入connect当中 将所有的函数和参数都给到App 生成一个新的App 组件内部通过this.props即可获取 传入的参数和方法
*App = connect(mapStatetoProps,actionCreators)(App)
*/
//使用注解的方式修改state和组件之间的传值
@connect(
//你需要state当中的什么参数 取出来就会放到props相对的参数当中
state=>({num:state}),
//你需要state当中的什么方法就可以写到下面的大括号中就能被放到props当中 并且会自动dispatch
{add_A,rem_R,addAsync}
)
class App extends React.Component{
constructor(props){
super()
}
render(){
return (
<div>
<h1>现在是数字几{this.props.num}</h1>
{/*使用了connect之后这里不需要在手动的dispatch了直接调用即可*/}
<button onClick={this.props.add_A}>加</button>
<button onClick={this.props.rem_R}>减</button>
{/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
<button onClick={this.props.addAsync}>等两秒再加</button>
</div>
)
}
}
export default App
14人点赞
作者:吴佳浩
链接:https://www.jianshu.com/p/269473787332
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
十二、react-reudx之@connect 摆脱redux的繁琐操作的更多相关文章
- react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- TNFE-Weekly[第七十二周已更新]
前端行业发展飞速,新技术如雨后春笋般快速出现,尤其是各种小程序陆续推出,相关的信息.文章也铺天盖地的遍布在各处,我们有时候会困惑,不知道哪些信息对于自己是有价值的,那么TNFE-腾讯新闻前端团队启动了 ...
- 【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文作者:Juraj Pavlo ...
- 【腾讯Bugly干货分享】腾讯验证码的十二年
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/581301b146dfb1456904df8d Dev Club 是一个交流移动 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十二):OAuth2.0说明
紧接上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>,这里专讲OAuth2.0. 理解OAuth2.0 首先我们通过一张图片来了解一下OAu ...
- Python开发【第二十二篇】:Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- 【Dev Club 分享】腾讯验证码的十二年
源:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578147&idx=3&sn=94a8f8f8b4a23 ...
- Java进阶(三十二) HttpClient使用详解
Java进阶(三十二) HttpClient使用详解 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们 ...
随机推荐
- SEQ!org.apache.hadoop.io.LongWritable
[uhadoop@10-13-109-236 subdir26]$ $HADOOP_HOME/bin/hadoop fs -cat /data/flumeEvents/FlumeData.155980 ...
- osg model
osg::ref_ptr<osg::Node> MyOSGLoadEarth::CreateNode() { osg::ref_ptr<osg::Group> _root = ...
- Qt编写控件属性设计器7-串口采集
一.前言 数据源是组态软件的核心灵魂,少了数据源,组态就是个花架子没卵用,一般数据源有三种方式获取,串口.网络.数据库,至于数据规则是什么,这个用户自己指定,本设计器全部采用第一个字节作为数据来演示. ...
- Windows 10、Ubuntu 18.04 双系统 双硬盘 安装经验总结
首先说明,我假设读者懂得分区.安装系统,所以不再深入讨论具体操作. 如果需要手把手教程,建议先参考其它Windows中加装Linux的相关文章. 网上其它文章.教程的常见问题是,各家机器配置不一样,安 ...
- React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)
版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...
- 极客时间-左耳听风-程序员攻略-UI/UX设计
程序员练级攻略:UI/UX设计 学习设计新手, 7 steps to become a UI/UX designer 学习设计的一些原则和套路,如配色.平衡.排版.一致性等. 用户体验的 4D 步骤- ...
- 【ARTS】01_36_左耳听风-201900715~201900721
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- iOS-AVFoundation生成缩略图
使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...
- iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影
iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...
- tp5博客项目实战2
改虚拟主机 (用www.tp5.com直接访问替代localhost/blog/tp5/public) 1.host修改 位置C:\Windows\System32\drivers\etc 127.0 ...