如果对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的繁琐操作的更多相关文章

  1. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

  2. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  3. TNFE-Weekly[第七十二周已更新]

    前端行业发展飞速,新技术如雨后春笋般快速出现,尤其是各种小程序陆续推出,相关的信息.文章也铺天盖地的遍布在各处,我们有时候会困惑,不知道哪些信息对于自己是有价值的,那么TNFE-腾讯新闻前端团队启动了 ...

  4. 【译】值得推荐的十大React Hook 库

    十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文作者:Juraj Pavlo ...

  5. 【腾讯Bugly干货分享】腾讯验证码的十二年

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/581301b146dfb1456904df8d Dev Club 是一个交流移动 ...

  6. Senparc.Weixin.MP SDK 微信公众平台开发教程(十二):OAuth2.0说明

    紧接上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明>,这里专讲OAuth2.0. 理解OAuth2.0 首先我们通过一张图片来了解一下OAu ...

  7. Python开发【第二十二篇】:Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  8. 【Dev Club 分享】腾讯验证码的十二年

    源:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578147&idx=3&sn=94a8f8f8b4a23 ...

  9. Java进阶(三十二) HttpClient使用详解

    Java进阶(三十二) HttpClient使用详解 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们 ...

随机推荐

  1. SEQ!org.apache.hadoop.io.LongWritable

    [uhadoop@10-13-109-236 subdir26]$ $HADOOP_HOME/bin/hadoop fs -cat /data/flumeEvents/FlumeData.155980 ...

  2. osg model

    osg::ref_ptr<osg::Node> MyOSGLoadEarth::CreateNode() { osg::ref_ptr<osg::Group> _root = ...

  3. Qt编写控件属性设计器7-串口采集

    一.前言 数据源是组态软件的核心灵魂,少了数据源,组态就是个花架子没卵用,一般数据源有三种方式获取,串口.网络.数据库,至于数据规则是什么,这个用户自己指定,本设计器全部采用第一个字节作为数据来演示. ...

  4. Windows 10、Ubuntu 18.04 双系统 双硬盘 安装经验总结

    首先说明,我假设读者懂得分区.安装系统,所以不再深入讨论具体操作. 如果需要手把手教程,建议先参考其它Windows中加装Linux的相关文章. 网上其它文章.教程的常见问题是,各家机器配置不一样,安 ...

  5. React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)

     版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...

  6. 极客时间-左耳听风-程序员攻略-UI/UX设计

    程序员练级攻略:UI/UX设计 学习设计新手, 7 steps to become a UI/UX designer 学习设计的一些原则和套路,如配色.平衡.排版.一致性等. 用户体验的 4D 步骤- ...

  7. 【ARTS】01_36_左耳听风-201900715~201900721

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  8. iOS-AVFoundation生成缩略图

    使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...

  9. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  10. tp5博客项目实战2

    改虚拟主机 (用www.tp5.com直接访问替代localhost/blog/tp5/public) 1.host修改 位置C:\Windows\System32\drivers\etc 127.0 ...