Блог

Я пытаюсь использовать токен из своего магазина redux внутри своего экземпляра Axios. Я попытался импортировать магазин, но я получаю сообщение об ошибке и _app_store__WEBPACK_IMPORTED_MODULE_1__.default is undefined . Пожалуйста, как мне это решить?

Это мой код.

store.js

    import { configureStore, combineReducers } from "@reduxjs/toolkit";  import authReducer from "../features/auth/authSlice";  import cartReducer from "../features/cart/cartSlice";    import {  persistReducer,  FLUSH,  REHYDRATE,  PAUSE,  PERSIST,  PURGE,  REGISTER,  } from "redux-persist";  import storage from "redux-persist/lib/storage";    const persistConfig = {  key: "root",  storage,  };    const reducers = combineReducers({  auth: authReducer,  cart: cartReducer,  });    const persistedReducer = persistReducer(persistConfig, reducers);    const store = configureStore({  reducer: persistedReducer,  middleware: (getDefaultMiddleware) =gt;  getDefaultMiddleware({  serializableCheck: {  ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],  },  }),  });    export default store;   

Тогда это мой файл экземпляра axios.

api.js

    import axios from "axios";  import store from "../app/store";    const token = store.getState().auth.token;    const api = axios.create({  baseURL: process.env.REACT_APP_API_URL,  headers: {  Authorization: token,  },  });    export default api;   

Очевидно, я пытался использовать магазин до того, как он был инициализирован. Поэтому я просто создал перехватчик для экземпляра Axios и позвонил в магазин там.

api.js

    import axios from "axios";  import store from "../app/store";    const api = axios.create({  baseURL: process.env.REACT_APP_API_URL,  });    api.interceptors.request.use((config) =gt; {  const token = store.getState().auth.token;  config.headers = {  Authorization: token ? `Bearer: ${token}` : null,  };  return config;  });    export default api;