十二、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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。