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

Question

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

prepare一种是在 a 内部定义带有回调的减速器createSlice：

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

在这种情况下，准备回调的类型签名迫使我显式返回payload,error和meta属性。

createAction另一种方法是将 a与回调一起使用prepare：

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

这是一个看起来更好一点的解决方案。至少我不必通过errorand meta。payload但即使不需要，仍然被迫返回。

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

我的问题是你会如何处理这种情况。也许我做的事情完全错误？

我知道还可以选择使用中间件，但设置仅处理一个操作的中间件看起来像是一种开销。

Answer 1

您在这里有点混淆术语 - 并且遗漏了一个重要术语；）

动作是具有属性的对象type。您永远无法在那里执行代码。

动作创建者是一个返回动作的函数。您可以在此处执行代码，但它将在分派结果操作之前执行。

异步thunk是thunk的一种特殊形式，它将生命周期操作（待处理/已完成/已拒绝）附加到thunk。确切地说，该createAsyncThunk函数创建了一个异步 thunk 动作创建器- 该函数创建了您可以调度以触发它的内容。

那么，缺少的东西是：什么是thunk？

thunk 是一个由redux-thunk中间件分派然后执行的函数。dispatch该函数将作为第一个参数和第二个参数传递getState，以便您可以在必要时从那里触发更多与 redux 相关的内容。

所以你正在寻找一个重击。通常，这些都是由动作创建者编写的，因此您正在寻找thunk 动作创建者。

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"))