Redux 工具包，何时使用 createListenerMiddleware 而不是 createAsyncThunk

Question

假设我有一个像这样的 Redux 切片

const authSlice = createSlice({
    name: 'authInfo',
    initialState: {value: ""},
    reducers: {
      setAuthState: (state, action: PayloadAction<any>) => {
        state.value = action.payload;
      },
    }
})

我想通过异步调用将 authState 保留在加密存储上。

直到现在我一直认为异步操作的首选是

createAsyncThunk

，定义这样的东西

export const storeAuthState = createAsyncThunk(
  'authInfo/storeAuthState',
  async (authState: any) => {
    await EncryptedStorage.setItem('auth_state', JSON.stringify(authState));
    return authState;
  },
);
...
const authSlice = createSlice({
...
    reducers: {
    ...
    extraReducers: builder => {
        builder.addCase(storeAuthState.fulfilled, (state, action) => {
            state.value = action.payload;
        })
    ...

并在我更新时发送

storeAuthState

。

但是我刚刚发现

createListenerMiddleware

的存在，我可以通过这种方式实现相同的目标：

export const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
    actionCreator: setAuthState,
    effect: async (action, listenerApi) => {
        await EncryptedStorage.setItem('auth_state', JSON.stringify(action.payload))
    }
})

对我来说，这两种方法没有太大区别，我知道 Redux Store 和 Encrypted Storage 更新的顺序不同，但最终结果是相同的。

可能第二种解决方案看起来更干净，所以我想知道这两种方法旨在解决的真实用例（rtk 网站上的 createListenerMiddleware 示例非常模糊）是什么，以及我何时应该采用一种解决方案而不是另一种？

Answer 1

它们是不同的工具，用于不同的目的。

重击是“势在必行”的。 这是“现在就去做这的事情”。

听众是“反应性的”。它是“当 this 事情发生时，运行 that 代码作为响应”。

举个例子：请注意，在您的 thunk 示例中，异步逻辑首先发生，然后调度操作，然后减速器更新。

使用侦听器，将分派操作并更新减速器，然后侦听器运行并执行更多工作。

更具体地说，

createAsyncThunk

是“现在去做一些异步工作，并在异步逻辑之前和之后分派操作”。

createListenerMiddleware

是“每当调度此操作时，就去做其他额外的工作”。

打个比方，它就像一把锤子和一把螺丝刀。 它们都是您用来建造房屋的工具，但是作为整体建筑工作的一部分，您在不同的时间使用它们来完成不同类型的任务。

另请参阅 Redux 文档中的“副作用方法”页面：

• https://redux.js.org/usage/side-effects-approaches