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

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

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

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

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

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

將react項(xiàng)目中用到的包版本記錄一下，

如下：

"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作為一個(gè)熱門框架，當(dāng)一個(gè)react項(xiàng)目組件層級(jí)越來(lái)越深，頁(yè)面越來(lái)越多的時(shí)候，數(shù)據(jù)在各個(gè)組件層級(jí)和頁(yè)面之間傳遞的需求就會(huì)比較多，很多變量也需要做成可全局管理的。

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

下面，就寫一下我自己對(duì) redux 和 React-redux 的學(xué)習(xí)以及使用的心得，權(quán)當(dāng)是對(duì)學(xué)習(xí)過(guò)程的一種記錄和分享。

一、redux和React-redux的幾個(gè)重要概念

1.1 action

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

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

一般來(lái)說(shuō)你會(huì)通過(guò) store.dispatch() 將 action 傳到 store。

1.2 reducer

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

1.3 store

store就是把a(bǔ)ction和reducer聯(lián)系到一起的對(duì)象，store本質(zhì)上是一個(gè)狀態(tài)樹(shù)，保存了所有對(duì)象的狀態(tài)。

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

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

當(dāng)一個(gè)store接收到一個(gè)action，它將把這個(gè)action代理給相關(guān)的reducer。

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

1.4 Provider

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

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

它的原理其實(shí)是通過(guò)React中的Context來(lái)實(shí)現(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è)構(gòu)造函數(shù)，返回一個(gè)對(duì)象，以屬性形式傳給我們的容器組件。

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

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

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

那么 connect 是怎么將React組件與 Redux store連接起來(lái)的呢？

其主要邏輯可以總結(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的使用

項(xiàng)目中關(guān)于redux的文件夾目錄如下

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

第一步，編寫操作用戶信息的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

第四步，獲取用戶信息

//配置代碼，通過(guò)connect將組件和store連接起來(lái)

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

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

export default connect(mapStateToProps, mapDispatchToProps)(PageClass)


//通過(guò)props獲取用戶信息
this.props.userInfo

第五步，修改用戶信息

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

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

至此就完成了redux+React-redux的一個(gè)簡(jiǎn)單使用流程。