react項目中redux的調(diào)試工具不起作用的解決

更新時間：2024年01月25日 09:22:03 作者：zimu_spm

這篇文章主要介紹了react項目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

redux的調(diào)試工具不起作用

這個百度了一圈，試了各種辦法，但依然不起作用。

本著嘗試的態(tài)度，我將redux-devtools-extentions 降低了一個bug版本，居然可以生效了，redux調(diào)試工具正常加載出數(shù)據(jù)；

將react項目中用到的包版本記錄一下，

如下：

"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"
    },

react中redux的原理及使用

react作為一個熱門框架，當一個react項目組件層級越來越深，頁面越來越多的時候，數(shù)據(jù)在各個組件層級和頁面之間傳遞的需求就會比較多，很多變量也需要做成可全局管理的。

在這個時候，redux和react-redux的使用就很有必要了。它們能幫助我們很方便的進行項目全局性的數(shù)據(jù)管理。

下面，就寫一下我自己對 redux 和 React-redux 的學習以及使用的心得，權(quán)當是對學習過程的一種記錄和分享。

一、redux和React-redux的幾個重要概念

1.1 action

Action 是把數(shù)據(jù)從應用（這里之所以不叫 view 是因為這些數(shù)據(jù)有可能是服務器響應，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。

它是 store 數(shù)據(jù)的唯一來源。

一般來說你會通過 store.dispatch() 將 action 傳到 store。

1.2 reducer

Reducers 指定了應用狀態(tài)的變化如何響應 actions并發(fā)送到 store 的，記住 actions 只是描述了有事情發(fā)生了這一事實，并沒有描述應用如何更新 state。

1.3 store

store就是把action和reducer聯(lián)系到一起的對象，store本質(zhì)上是一個狀態(tài)樹，保存了所有對象的狀態(tài)。

任何UI組件都可以直接從store訪問特定對象的狀態(tài)。

在 Redux 中，所有的數(shù)據(jù)（比如state）被保存在一個store容器中，在一個應用程序中只能有一個store對象。

當一個store接收到一個action，它將把這個action代理給相關的reducer。

reducer是一個純函數(shù)，它可以查看之前的狀態(tài)，執(zhí)行一個action并且返回一個新的狀態(tài)。

1.4 Provider

Provider 其實就只是一個外層容器，它的作用就是通過配合 connect 來達到跨層級傳遞數(shù)據(jù)。

使用時只需將Provider定義為整個項目最外層的組件，并設置好store。那么整個項目都可以直接獲取這個store。

它的原理其實是通過React中的Context來實現(xiàn)的。

它大致的核心代碼如下：

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
}

1.5 connect

connect 的作用是連接React組件與 Redux store，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個構(gòu)造函數(shù)，返回一個對象，以屬性形式傳給我們的容器組件。

它共有四個參數(shù)mapStateToProps, mapDispatchToProps, mergeProps以及options。

mapStateToProps 的作用是將store里的state（數(shù)據(jù)源）綁定到指定組件的props中
mapDispatchToProps 的作用是將store里的action（操作數(shù)據(jù)的方法）綁定到指定組件的props中

另外兩個方法一般情況下使用不到，這里就不做介紹。。

那么 connect 是怎么將React組件與 Redux store連接起來的呢？

其主要邏輯可以總結(jié)成以下代碼：

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

二、redux和React-redux的使用

項目中關于redux的文件夾目錄如下

拿管理用戶信息數(shù)據(jù)的需求來舉例

第一步，編寫操作用戶信息的action

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
        })
    }
}

第二步，編寫改變用戶信息并返回新state的reducer

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
    }

}

第三步，完成store的創(chuàng)建

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
})();

至此就完成了redux+React-redux的一個簡單使用流程。