React access redux store in axios interceptor

user_16493106 0
Viewed 5316

I want to access redux store in axios's interceptor which configures jwt token, so I import the store into the API.js file. But it immediately logged out some errors.enter image description here

Here's the axios instance

import axios from "axios";
import { store } from '../redux/store';

export const SERVERURL = "some url";

axios.defaults.withCredentials = true;
const API = axios.create({ baseURL: "some url" });

API.interceptors.request.use(req => {
  // something I want to do
  return req;
});

export default API;

Here's the store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./user";

export const store =  configureStore({ reducer: { user: userReducer } });

And the index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import {store} from "./redux/store";
import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

I want to know what would be the problem?

axios redux reactjs
2 Answers
user_629370

I used this approach.

Create axios instance

services/index.ts

import axios, { AxiosInstance } from 'axios'

const instance: AxiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    Accept: 'application/json',
    'Content-type': 'application/json',
  },
})

export default instance

Create interceptor. Axios instance should be separated from interceptor so you can call the instance separately.

services/interceptor.ts

import { AxiosError, AxiosRequestConfig } from 'axios'

import instance from './index'

const setUpInterceptor = (store: any) => {
  const handleError = async (error: AxiosError) => {
    return Promise.reject(error)
  }

  instance.interceptors.request.use(
    async (config: any | AxiosRequestConfig) => {
      /* your logic here */
      return config
    }
  )

  instance.interceptors.response.use((response) => response, handleError)
}

export default setUpInterceptor

Here, all you need to do is to initialize the interceptor in your root js file _app.tsx, app.js or index.js then you can do now your logic in your interceptor.ts

import setUpInterceptor from '@/utils/services/interceptor'
import { useStore } from 'react-redux'
const MyApp = ({ Component, pageProps }: AppProps) => {
  const store = useStore()
  setUpInterceptor(store) //<-- initialize the interceptor here

  return (
    <PersistGate persistor={store.__persistor}>
      <Component {...pageProps} />
    </PersistGate>
  )
}

Source: https://www.bezkoder.com/redux-refresh-token-axios/

user_66384710
Related