使用 redux 工具包时，在操作中定义副作用（不是异步 thunk）的正确方法是什么？

大佬教程收集整理的这篇文章主要介绍了使用 redux 工具包时，在操作中定义副作用（不是异步 thunk）的正确方法是什么？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 redux 工具包时，在操作中定义副作用（不是异步 thunk）的正确方法是什么？？

目前我正在使用 Typescript 深入研究 Redux Toolkit，但我一直坚持注销操作。它基本上不应该有任何有效负载，但应该修改 localstorage 和 axios 配置。 我知道两种工作方式略有不同。

一种是在 prepare 内使用 createSlice 回调定义 reducer：

const authSlice = createSlice({
  name: "authentication",initialState,reducers: {
    logout: {
      reducer: () => initialState,prepare: () => {
        API.logout();
        return { payload: undefined,error: undefined,Meta: undefined };
      },},...

在这种情况下，prepare 回调的类型签名迫使我显式返回 payload、error 和 @H_635_5@meta 属性。

另一种方法是使用带有 createAction 回调的 prepare：

export const logout = createAction("authentication/logout",() => {
  API.logout();
  return { payload: undefined };
});

这是一个更好看的解决方案。至少我不必传递 error 和 @H_635_5@meta。但仍然被迫返回 payload，即使它不需要。

有点困惑为什么 prepare 函数签名不同，但这不是重点。

我的问题是您将如何处理此类情况。也许我做错了什么？

我知道也有使用中间件的选项，但设置只处理一个操作的中间件看起来像是一种开销。

解决方法

const logout = (potentiallySomeArgument) => (dispatch,getStatE) => {
  api.logout(potentiallySomeArgument);
  // maybe you also want to dispatch an action to clear state
  dispatch(userSlice.clear())
}

dispatch(logout("whatever"))

import { createAsyncThunk } from '@reduxjs/toolkit'

const api = async () => { }

const increment = createAsyncThunk('counter/increment',api)

const action = increment() // AsyncThunkAction<void,void,{}>