RTK中使用监听器中间件与extraReducers响应Action的区别疑问

嘿，刚好我最近也在捣鼓RTK的这些用法，来跟你掰扯掰扯这俩的核心区别哈！

• 核心定位完全不同
  extraReducers是Redux里专门用来做纯同步状态更新的“专属工位”——它只能干一件事：接收到指定action后，同步修改store里的状态，绝对不能在这里搞异步操作（比如写fetch请求），不然分分钟给你报错或者出奇怪的状态问题。
  而Listener Middleware就是个“全能打杂工”，专门处理异步逻辑和各种副作用：比如action触发后要调接口、延迟执行操作、监听多个action的组合触发，这些活儿交给它准没错。

• 执行时机有先后
  extraReducers是在action被dispatch之后、状态更新完成之前同步执行的，属于Redux数据流里的“状态更新核心环节”；
  Listener Middleware则是在action处理完、状态已经更新完毕之后才触发的，它站在数据流的下游，专门负责“状态更新后的后续操作”。

• 能力范围天差地别

  • extraReducers的能力很专一：只能是纯函数，不能有任何副作用，唯一的使命就是根据action更新state；
  • Listener Middleware的能力就宽泛多了：它可以dispatch新的action、随时访问当前的store状态、取消之前设置的监听、设置条件触发（比如只有当某个状态满足时才执行逻辑），还能完整处理异步流程，比如等待另一个action触发后再执行下一步。

• 适用场景要分清

  • 要是你只是想在某个action触发时，同步更新store里的状态，比如用户点“加一”按钮后直接把count加1，那用extraReducers就够了，简单直接不啰嗦；
  • 要是你需要在action触发后搞点“花活”：比如登录成功action触发后去拉取用户信息接口、延迟3秒后自动dispatch一个新action、或者要监听“登录成功+页面加载完成”两个action都触发后再执行逻辑，这时候Listener Middleware就是你的最佳搭档。

给你举俩简单的代码例子更直观：
extraReducers的用法：

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(increment, (state) => {
      state.value += 1; // 纯同步的状态更新
    });
  },
});

Listener Middleware的用法：

export const addCounterListeners = (startListening: AppStartListening) => {
  startListening({
    actionCreator: increment,
    effect: async (action, listenerApi) => {
      // 这里随便搞异步操作，比如调接口
      const userInfo = await fetchUserInfo();
      // 还能dispatch新的action
      listenerApi.dispatch(setUserInfo(userInfo));
      // 随时获取当前的store状态
      const currentCount = listenerApi.getState().counter.value;
      console.log('当前计数是', currentCount);
    },
  });
};

备注：内容来源于stack exchange，提问作者aug