react-redux中@connect用法

忘记subscribe，记住reducer，action和dispatch即可

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代码

弹出个性化配置(因为很多的配置被react的脚手架隐藏了起来这一步就是了展开，这个操作是不可逆的)
$ Npm run eject
安装依赖的插件
$ npm install babel-plugin-transform-decorators-legacy插件
完成上一步操作在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

ware_fz

用文字记录生活

react-redux中@connect用法

React-redux具体使用

@connect注解