react-redux中的connect的小封装

最新推荐文章于 2025-05-02 15:45:00 发布

albb58

最新推荐文章于 2025-05-02 15:45:00 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react-redux的connect用法封装

本文链接：https://blog.youkuaiyun.com/albb58/article/details/84533622

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种简化React-Redux应用的方法，通过封装connect函数，使得组件与Redux状态及actionCreator的连接更加便捷。封装后的代码提高了组件的可读性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了实现connect更方便的应用，所以就简单的封装了一下，使用方法：

export default connect(MessageControl,[{name:'message',state:['message']}])
export default connect(MessageControl,['message'])

接下来是封装的代码

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from './actionCreators'
const _connect = (UiComponent,reducers = []) => {
    
    let mapStateToProps = (state) => {
        let result = {}
        // 如果没有传值，那么将所有的东西都传过去
        if(reducers.length <=0) return state
        reducers.forEach(reducers => { //遍历传的redusers
            if(typeof reducers === 'string'){ // 假设传的是一个字符串
                result[reducers] = state[reducers] ? state[reducers] : {}
             }else if(typeof reducers === 'object') { // 假设传入的是一个对象
                result[reducers.name] = filterObject(state[reducers.name],reducers.states)
            }
        })
        // return {
        //     reducers:state.reducers
        // }
        return result
    }
    
    let mapDispatchToProps = (dispatch) => {
        let result = {}
        // 如果没有传值，那么什么方法都不给他
        if(reducers.length <=0) return {}

        // 将对应的actionCreator的方法处理后传给UI组件
        reducers.forEach(reducers => { //遍历传的redusers
            let name = (typeof reducers === 'string') ? reducers : reducers.name
            result[name+'_actions'] = bindActionCreators(action[name],dispatch)
            // [name+'_actions'] 字符串可以随便放
        })
        return result
    }

    return connect(mapStateToProps,mapDispatchToProps)(UiComponent)
}

function filterObject (obj, arr) {
    if ( !arr || arr.length <= 0 ) return obj;
    let result = {}
    arr.forEach(key => {
        if ( obj.hasOwnProperty(key) ) {
            result[key] = obj[key]
        }     
    })
    return result
}

export default _connect

我们还需要一个文件用来存放reduser的一些方法，建一个actionCreators的文件，代码如下：

import count from '../promise/store/count/action-creators'
import message from '../promise/store/message/action-creators'

export default {
    count,
    message,
}

这样简单封装就完成了，然后就可以引入使用了