title: How to I create a general global Axios instance that will use my Redux store for header token information?
body: <p>I am currently using Axios to do API calls and a Redux store to keep my JWT tokens such as my access tokens.</p>
  <p>Here is an example of what my current Axios instance looks like:</p>
  <p><strong>ProductionInstanceAPI.js</strong></p>
  <pre><code>import axios from 'axios';
  
  export default axios.create({
    baseURL: `https://my.app/`,
  });
  </code></pre>
  <p>And it is used like this in one of my React pages:</p>
  <p><strong>Predictions.js</strong></p>
  <pre><code>import ProductionAPI from '../../ProductionInstanceAPI';
  import { useSelector } from 'react-redux';
  import { selectAccount } from '../../redux/features/account/accountSlice'
  
  const Predictions = () =&gt; {
    const accountInformation = useSelector(selectAccount);
  
    useEffect(() =&gt; {
      ProductionAPI.get('ml/get_linear_regressions/', { headers: {&quot;Authorization&quot;: `Bearer ${accountInformation.accessToken}`}})
        .then((response) =&gt; {
          let data = response.data;
          console.log(data);
        }).catch(error =&gt; {
          console.log(error);
        })
      }, [accountInformation.accessToken]);
  }
  </code></pre>
  <p>However thought I hate having to do useSelector for all of my .js files that do an API call and then have to add in the information to my API calls.</p>
  <p>I tried doing this, however though you can't use the useSelector hook outside of a React component.</p>
  <p><strong>ProductionInstanceAPI.js trying to use Redux store</strong></p>
  <pre><code>import axios from 'axios';
  import { useSelector } from 'react-redux';
  import { selectAccount } from './redux/features/account/accountSlice'
  
  const accountInformation = useSelector(selectAccount)
  
  export default axios.create({
    baseURL: `https://my.app/`,
    headers: {&quot;Authorization&quot;: `Bearer ${accountInformation.accessToken}`}
  });
  </code></pre>
  <p>How do I somehow add the accessToken from my Redux store for all of my Axios calls?
  Is there a way to do this that is cleaner?</p>
  <p>Thank you so much!</p>