Why store.getState() doesn't update in reduxjs/toolkit

Question

Does anyone know why though through the "useSelector" hook, the updated state is available, but the store.getState() doesn't update?

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;

Here after dispatching, through the "useSelector" hook, the updated state is recieved:

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

:

But when I wanted to use the updated baseURL in my APIConfig file, I realized that it didn't update:

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;

The above config is used like so:

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

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

Does anyone know the answer or have a better idea?

Answer 1

My best guess here is that you config file is not your application, wrapped by the store provider.

EDIT - To clarify :

const state = store.getState();

Can only be used inside a component mounted in your application that is wrapped by the store provider.

Since your .config file is not wrapped and mounted in your application and wrapped by your provider, it is normal to get an undefined value.