为什么 store.getState() 没有在 reduxjs/toolkit 中更新

Question

有谁知道为什么虽然通过“useSelector”钩子，更新的状态可用，但 store.getState() 不更新？

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    baseUrl: "http://example.com/" 
}

function changeToLocal(state) {
    return {...state, baseUrl: "https://localhost:345345/"}
}
function changeToGlobal(state) {
    return { ...state, baseUrl: "http://example.com/"}
}


const ApiConfig = createSlice({
    name: 'changeBaseURL',
    initialState,
    reducers: {
        changeToLocal,
        changeToGlobal,
    }
})

export const {
    changeToLocal: changeToLocalAction,
    changeToGlobal: changeToGlobalAction,
} = ApiConfig.actions

export default ApiConfig.reducer;

在调度之后，通过“useSelector”钩子，接收到更新的状态：

const Header = () => {
    const dispatch = useDispatch())
    const CurrentBaseURL= useSelector(state => state.changeBaseURL.baseUrl)
    console.log("🚀 ~ file: header.jsx ~ line 11 ~ Header ~ CurrentBaseURL", CurrentBaseURL)
    const changeBaseURl = (e) => {
        if (e.target.value === "local") {
            dispatch(changeToLocalAction())
        } else if (e.target.value === "global"){
            dispatch(changeToGlobalAction())
        }
    }
...

：

但是当我想在 APIConfig 文件中使用更新后的 baseURL 时，我意识到它没有更新：

import { Toast } from '../../helpers/Toast';
import axios from 'axios';
import store from '../../redux/store';
import { useSelector } from 'react-redux';
    const instance = axios.create({
        baseURL: "htttp://example.com",
        timeout: 10000,
        headers: { "x-Custom-Header": "foobar" }
    })
    instance.interceptors.response.use(response => {
        if (response.headers["token-user"]) {
            localStorage.setItem("token", response.headers["token-user"]);
        }
        if (response.data && response.data.statusIcon && response.data.status) {
            Toast(response.data.statusIcon, response.data.status);
        }
        return response;
    }, err => {
        const expectErrors = err.response && err.response > 400 && err.response.status < 500;
        if (!expectErrors) {
            console.log(err);
        return Promise.reject(err);

    });
    export default instance;

上面的配置是这样使用的：

import Api from '../../../utils/request/api/Api'

export const GetDisposablePassword = (nationalCode) => {
    return Api.post(`api/Auth/GetDisposablePassword`, { nationalCode })
};

有谁知道如何通过主要方法处理这个问题？

Answer 1

我最好的猜测是您的配置文件不是您的应用程序，由商店提供商包装。

编辑 - 澄清：

const state = store.getState();

只能在由商店提供商包装的应用程序中安装的组件内使用。

由于您的 .config 文件未包装并安装在您的应用程序中并由您的提供商包装，因此获得未定义的值是正常的。

Answer 2

我使用locagStorage解决了这个问题

const Header = () => {
    const changeBaseURl = (e: any) => {
        if (e.target.value === "local") {
            localStorage.setItem("baseURL", JSON.stringify({
                key: "local",
                value: localBaseURL   
            }));
        } else if (e.target.value === "current") {
            localStorage.setItem("baseURL", JSON.stringify({
                key: "current",
                value: currentBaseURL
            }));
        } else if (e.target.value === "official") {
            localStorage.setItem("baseURL", JSON.stringify({
                key: "official",
                value: officialBaseURL
            }));
        }
    }
...