如何在 Redux-Toolkit + typescript 中调度组件外部的操作？

Question

我有轴拦截器，我在商店里有错误减少器。 如何在组件外部正确调度操作？

我尝试了 store.dispatch，我不知道为什么，但它使我的整个商店崩溃并且我的整个应用程序崩溃了。 我尝试了useAppDispatch，但出现错误无法在组件外使用它。 下面的代码：

import axios from "axios";
import store from "../store/store";
import { addError } from "../store/errorSlice/errorSlice";

const instance = axios.create({
    timeout: 1000,
    withCredentials: true,
    baseURL: "http://localhost:8000"
})

instance.interceptors.response.use(response => response,
   function (error) {
        console.log("ERROR FROM SERVER");
        const { data, status } = error.response;
        const { message } = data;

        store.dispatch(addError({ message, status, active: true })) // crashes my whole app. It looks like triggering an action, but then delete all reducers
        return ;
})

export default instance;

这是我的 ErrorSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import IError from "../../models/error";

const initialState: IError = {
    message: "",
    status: 400,
    active: false
}

const ErrorSlice = createSlice({
    name: "Error",
    initialState,
    reducers: {
        addError: (_, action: PayloadAction<IError>) => action.payload,
        deleteError: (_) => {
            return { 
                message: "",
                status: 400,
                active: false } as IError   }
    }
})

export default ErrorSlice.reducer;
export const { addError, deleteError } = ErrorSlice.actions;

Answer 1

您永远不应该将商店直接导入到其他应用程序文件中，因为您最终可能会遇到循环导入依赖问题。

对于这种用例，最好的解决方案是在启动时将文件注入 Axios 设置逻辑，如下所示：

// axios-setup.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 "./axios-setup";
injectStore(store);