如何解决 redux 工具包 "circular reference" 问题

Question

我有这个切片

logout.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 中做同样的事情..?

如何解决 redux 工具包 "circular reference" 问题

how to sove redux toolkit "circular reference" problem

reactjs

react-redux

redux-toolkit