Что такое createListenerMiddleware в Redux Toolkit и как его можно использовать?

Что такое createListenerMiddleware?

createListenerMiddleware — это middleware из Redux Toolkit, который позволяет выполнять произвольный код (побочные эффекты) в ответ на диспатч определенных экшенов. Он похож на саги или эпики, но проще и легче в использовании, так как не требует дополнительных библиотек.

Как это работает?

Middleware перехватывает каждый диспатч и проверяет, соответствует ли он заданным условиям (например, типу экшена). Если условие выполняется, запускается колбэк, который может выполнять асинхронные операции, диспатчить другие экшены или взаимодействовать с состоянием.

Пример использования

import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
import { addTodo, removeTodo } from './todosSlice';

const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
  matcher: isAnyOf(addTodo, removeTodo),
  effect: async (action, listenerApi) => {
    console.log('Todo изменен:', action);
    // Можно диспатчить другие экшены
    listenerApi.dispatch({ type: 'log/action', payload: action.type });
  },
});

export default listenerMiddleware;

Где применяется?

• Логирование действий пользователя
• Навигация после успешного действия (например, редирект после логина)
• Синхронизация с localStorage или IndexedDB
• Вызов API без создания thunk

Вывод

createListenerMiddleware — это удобный инструмент для обработки побочных эффектов в Redux, когда не требуется полная мощь саг или thunk. Он особенно полезен для простых сценариев, где нужно реагировать на действия без изменения логики редьюсеров.