Redux Toolkit中addListener动作无法注册动态中间件问题

你的问题核心是没有将listenerMiddleware正确配置到Redux Store中——虽然你调用了addListener并在DevTools里看到了listenerMiddleware/add动作，但因为Store里没挂载对应的中间件，所以后续的动作根本不会被监听。

正确的配置步骤 #

1. 创建并配置listenerMiddleware到Store #

首先在你的Store配置文件里，创建listenerMiddleware实例，并把它加入到configureStore的middleware数组中：

// store.js
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
// 导入你的根reducer
import rootReducer from './reducers';

// 创建监听器中间件实例
export const listenerMiddleware = createListenerMiddleware();

export const store = configureStore({
  reducer: rootReducer,
  // 将中间件加入Store的中间件链
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
});

2. 在组件中使用addListener #

确保你的组件已被Redux Provider包裹（React Redux基础要求），之后就可以正常使用addListener了：

import { addListener } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import { useEffect } from 'react';

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = dispatch(
      addListener({
        // predicate返回true会监听所有动作，可根据需求调整匹配规则
        predicate: () => true,
        effect: async (action, listenerApi) => {
          console.log('监听到动作:', action);
        },
      })
    );

    return () => unsubscribe();
  }, [dispatch]);

  return <div>你的组件内容</div>;
};

export default App;

关键说明 #

• 必须先通过createListenerMiddleware()创建实例，并将listenerMiddleware.middleware挂载到Store的middleware数组里，addListener动作才能被正确处理。
• 若需要在slice等非组件场景添加监听器，可使用listenerMiddleware.startListening()添加静态监听器；动态监听器更适合在组件中随挂载/卸载添加/移除的场景。

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