React 访问 axios 拦截器中的 redux 存储

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.

这是 axios 实例

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;

这是 store.js

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

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

还有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")
);

我想知道会出现什么问题？

这是一个循环导入依赖问题，是由于尝试直接导入store文件到代码库的其他部分。你需要避免这样做。

根据我们的文档，一个推荐的选项是添加一个小的injectStore()将函数添加到 Axios 拦截器文件中，并将存储注入到拦截器中作为应用程序设置的一部分index.js:

https://redux.js.org/faq/code-struct#how-can-i-use-the-redux-store-in-non-component-files

// common/api.js

let store

export const injectStore = _store => {
  store = _store
}

axiosInstance.interceptors.request.use(config => {
  config.headers.authorization = store.getState().auth.token
  return config
})

// index.js

import store from './app/store'
import { injectStore } from './common/api'
injectStore(store)