如何解决redux工具包“循环引用”问题

Question

我有这个切片

注销.js

import { createSlice } from '@reduxjs/toolkit';
import { logoutUser } from './actions/logoutUserAction';

const initialState = {
  status: null,
};

const logout = createSlice({
  name: 'logout',
  initialState,
  reducers: {
    changeStatus: state => { <===== I want to use this action
      state.status = null;
    },
  },
  extraReducers: {
    [logoutUser.pending]: state => {
      state.status = 'loading';
    },
    [logoutUser.fulfilled]: state => {
      state.status = 'success';
    },
    [logoutUser.rejected]: state => {
      state.status = 'failed';
    },
  },
});

export const { changeStatus } = logout.actions;

export default logout.reducer;

logoutuserAction.js

import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import { changeStatus } from '../logout';

export const logoutUser = createAsyncThunk(
  'logout/logoutUser',
  async (data, { dispatch }) => {
    return axios({
      method: 'get',
      url: '/logout',
      withCredentials: true,
    }).then(res => {
      dispatch(changeStatus()); <=== I use it here
      localStorage.removeItem('isAuthenticated');
      return res.data;
    });
  }
);

我在这里阅读了相关内容 https://redux-toolkit.js.org/usage/usage-guide/#exporting-and-using-slices 但我不明白这部分：

如果遇到这种情况，您可能需要以避免循环引用的方式重组代码。这通常需要将共享代码提取到两个模块都可以导入和使用的单独的公共文件中。在这种情况下，您可以使用 createAction 在单独的文件中定义一些常见的操作类型，将这些操作创建者导入到每个切片文件中，并使用 extraReducers 参数处理它们。

我得到什么：

Answer 1

您应该能够通过在调用logoutUser上方放入相同的文件来做到这一点createSlice，但是...为什么要这样做呢？一眨眼的功夫，logoutUser.fulfilled就被调度了，你可以在那个 extraReducer 中做同样的事情..？