Redux 工具包 addListener 动作未注册动态中间件

Question

我正在尝试使用 RTK 添加动态侦听器中间件，但它似乎不会拦截操作。我使用特殊的addListener操作，文档应该允许从 React 组件注入动态中间件。在 Redux 开发工具上，我看到listenerMiddleware/add记录了操作，但之后我没有看到中间件拦截任何操作。

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

const App = () => {
  const dispatch = useDispatch();
  useEffect(() => {
        const unsubscribe = dispatch(
        addListener({
            predicate: () => {
                return true;
            },
            effect: async (action, listenerApi) => {
                console.log('log', action);
                
            },
        })
    );
    return () => unsubscribe();
}, [])
}

Answer 1

您必须将侦听器添加到您的商店 - 如果您跳过该步骤，中间件也不会侦听您的商店。

从文档：

// Create the middleware instance and methods
const listenerMiddleware = createListenerMiddleware()

const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
  // Add the listener middleware to the store.
  // NOTE: Since this can receive actions with functions inside,
  // it should go before the serializability check middleware
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})