Estoy tratando de usar el token de mi tienda redux dentro de mi instancia de Axios. Intenté importar la tienda pero recibo un error que dice _app_store__WEBPACK_IMPORTED_MODULE_1__.default is undefined . Por favor como soluciono esto?
Este es mi código.
tienda.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) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }); export default store;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) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }); export default store;
Entonces este es mi archivo de instancia de 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;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;
Aparentemente, estaba tratando de usar la tienda antes de que se inicializara. Así que simplemente creé un interceptor para la instancia de Axios y llamé a la tienda allí.
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) => { const token = store.getState().auth.token; config.headers = { Authorization: token ? `Bearer: ${token}` : null, }; return config; }); export default api;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) => { const token = store.getState().auth.token; config.headers = { Authorization: token ? `Bearer: ${token}` : null, }; return config; }); export default api;