react-redux @connect的使用 - Kaiqisan

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒,我第一次见识到这个知识是在使用taro的时候看到的，当时觉得奇怪，自己写了一年的js却从来没有见到过这个语法，（但是别的语言似乎很常见吧）于是就查资料，发现这是一个装饰器语法，详细内容在这

本章不详细讲解装饰器的原理，本章讲解具体的使用方法和如何跑动项目

• 第一步，先安装相应的包

npm i  @babel/plugin-proposal-decorators --save-dev

装饰器是ES7的语法，但是现在没有主流浏览器支持这个特性

刚刚被谷歌暴打了一顿,查了好久才知道不能兼容

• 第二步，完成项目配置

// 这个plugins在module里面，然后找到检测js文件的那个模块，填写在相应的plugins里面即可
plugins: [
    ....
    ["@babel/plugin-proposal-decorators", { "legacy": true }
],

• 第三步，跑项目，开始写代码

• 第四步，编写代码

找到最外层的标签，填写provider标签（ 这样可以让整个app都可以获取store的数据，防止组件一层一层传递state造成代码冗杂和结构复杂）

import { Provider } from 'react-redux' // P是大写的
import store from '../redux/store'
/* index.js主入口文件 */
<Provider store={store}>
    <div className="App">
    </div>
</Provider>

store有一个全局参数 num

/* reducer.js */
const INITIAL_STATE = {
    num: '0000'
}

const reducer = (state = INITIAL_STATE, action) => {
    ....
}

export default reducer

/* 原先写法，使用经典react框架create-react-app */

import React from 'react'

import { connect } from 'react-redux' // 导入connect方法


class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return <>
            <p>值：{this.props.reducer.num}</p>
        </>
    }
}

export default connect(( reducer ) => {
    return {
        reducer
    }
}, null)(Demo)

明显看出，原先的写法并不简介，理解起来非常困难

然后我们改一改代码

import React from 'react'
// import { Link } from 'react-router-dom'

import { connect } from 'react-redux'

@connect(( reducer ) => {
    return {
        reducer
    }
}, (dispatch) => ({}))
class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    
    render() {
        return <>
            <button>点击+1</button>
            <p>值：{this.props.reducer.num}</p>
        </>
    }
}

export default Demo

这样子似乎可以更好理解了呢

原理

核心是利用了装饰器对原先的类进行修改，把store的参数植入类的props里面