react项目中redux的调试工具不起作用的解决

"dependencies": {
        "@craco/craco": "^6.4.3",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "@xianzhengquan/postcss-px-2-vw": "0.0.1",
        "antd-mobile": "^5.11.2",
        "axios": "^0.27.2",
        "formik": "^2.2.9",
        "postcss": "^8.3.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "react-redux": "^8.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "5.0.1",
        "react-thunk": "^1.0.0",
        "redux": "^4.2.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-thunk": "^2.4.1",
        "web-vitals": "^2.1.4",
        "yup": "^0.32.11"
    },
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

import React, {Component} from 'react'
import {PropTypes} from 'prop-types'

export default class Provider extends Component {
    getChildContext() {
        return {store: this.props.store}
    }

    constructor() {
        super()

        this.state = {}
    }

    render() {
        return this.props.children
    }
}

Provider.childContextTypes = {
    store: PropTypes.object
}

import {Component} from "react";
import React from "react";
import {PropTypes} from 'prop-types'

const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent => {
    class Connect extends Component {
        constructor() {
            super()
            this.state = {}
        }
        componentWillMount() {
            this.unSubscribe = this.context.store.subscribe(() => {
                this.setState(mapStateToProps(this.context.store.getState()))
            })
        }
        componentWillUnmount() {
            this.unSubscribe()
        }
        render() {
            return <WrappedComponent  {...this.state}
                                      {...mapDispatchToProps(this.context.store.dispatch)}/>
        }
    }

    Connect.contextTypes = {
        store: PropTypes.object
    }
    return Connect
})
export default connect

import {USER_INFO} from "../constants/actionTypes";
import store from '../store/store'

export const switchUser = (data) => {
    console.log("switchUser()",data);
    return () => {
        store.dispatch({
            type: USER_INFO,
            ...data
        })
    }
}

import {USER_INFO} from "../constants/actionTypes";

const redUserInfo = (state = {
    userId: 10001,
    userName: '',
    userOpenid: '',
    userPhone: '',
    userRole: 0
}, action) => {
    if (action === undefined) {
        return state
    }
    switch (action.type) {
        case USER_INFO:
            return {
                ...state,
                ...action
            }
        default:
            return state
    }

}

import {createStore} from 'redux'
import reducers from '../reducers/index'

let store = createStore(reducers)

export default store

//配置代码，通过connect将组件和store连接起来

let mapStateToProps = (state) => ({
    userInfo: {...state.redUserInfo}
})

let mapDispatchToProps = (dispatch) => ({})

export default connect(mapStateToProps, mapDispatchToProps)(PageClass)


//通过props获取用户信息
this.props.userInfo

import {switchUser} from '../../redux/actions/userInfo'

switchUser({
    userId: 10001,
    userName: '',
    userOpenid: '',
    userPhone: '',
    userRole: 2
})();