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

Question

我有轴拦截器，我在商店里有 Error reducer。如何在组件外部正确派发操作？

我试过 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

You should never import the store directly into other application files，因为你很可能会遇到循环导入依赖问题。

对于这种用例，最好的解决方案是inject the file into the Axios setup logic at startup time，像这样：

// 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);

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

how to dispatch action outside component in Redux-Toolkit + typescript?

reactjs

redux

react-redux

redux-toolkit