如何获取createAsyncThunk结合createSlice生成的Action用于监听中间件？

1. createSlice自带reducers生成的Action #

这部分和你之前的用法完全一致，直接从authSlice.actions中提取即可。比如你定义的setUser、removeUser，直接用authSlice.actions.setUser、authSlice.actions.removeUser就能拿到对应的Action Creator，不需要做任何额外修改。

2. createAsyncThunk生成的Action #

createAsyncThunk本身会自动生成三个关联的Action Creator，分别对应异步操作的三种状态：pending、fulfilled、rejected，这些不需要从slice里获取，直接通过你定义的thunk变量本身的属性调用即可。

举个实际代码例子：

// 先定义logout异步thunk
const logout = createAsyncThunk('auth/logout', async () => {
  // 这里写你的logout异步逻辑，比如调用后端接口
});

// 再创建authSlice
const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null },
  reducers: {
    setUser: (state, action) => { state.user = action.payload },
    removeUser: (state) => { state.user = null }
  },
  extraReducers: (builder) => {
    builder.addCase(logout.fulfilled, (state) => {
      state.user = null;
    });
  }
});

在createListenerMiddleware中使用时，直接传入logout.fulfilled这类Action Creator即可：

const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
  actionCreator: logout.fulfilled, // 直接用thunk的fulfilled状态Action
  effect: async (action, listenerApi) => {
    // 这里写你要触发的逻辑，比如清除本地存储、跳转登录页等
    localStorage.removeItem('token');
    window.location.href = '/login';
  }
});

可选：统一管理所有Action（非必需） #

如果你习惯从同一个入口获取所有Action，可以把thunk生成的Action补充到authSlice.actions中：

authSlice.actions.logoutPending = logout.pending;
authSlice.actions.logoutFulfilled = logout.fulfilled;
authSlice.actions.logoutRejected = logout.rejected;

// 之后就可以用authSlice.actions.logoutFulfilled来调用了

不过这种方式不是官方推荐的，直接使用thunk变量的属性更符合Redux Toolkit的设计规范。

内容的提问来源于stack exchange，提问作者code_learner93