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

Question

我想访问 axios 的拦截器中配置 jwt 令牌的 redux 存储，因此我将存储导入到 API.js 文件中。但它立即注销了一些错误。

这是 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")
);

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

Answer 1

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

根据我们的文档，一个推荐的选项是向 Axios 拦截器文件添加一个小injectStore()函数，并将存储注入到拦截器中作为应用程序设置的一部分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)