React Axios 实例：How to get Token from redux store to put it on my axios instance

Question

I want to create an instance of Axios to use for my HTTP calls, the problem is the token stored on my redux, I don't know how to get it and put it in my configuration, because UseSelector is a part of the functional component but in my case, I have a javascript configuration like this:

import axios from 'axios';

const axiosClient = axios.create();

axiosClient.defaults.baseURL = 'https://example.com/api/v1';

axiosClient.defaults.headers = {
  'Content-Type': 'application/json',
  Accept: 'application/json'
};

//All request will wait 2 seconds before timeout
axiosClient.defaults.timeout = 2000;

axiosClient.defaults.withCredentials = true;

Does anyone of you know how to get the Token variable from redux in this case, please? thank you!

Answer 1

There are multiple ways to do it, and I like the Axios interceptor approach.

const instance = axios.create({
  baseURL: "base_url",
}); 

instance.interceptors.request.use(function (config) {
  const token = store.getState()?.user?.userData?.token;
    config.headers.Authorization = token;
    return config;
});