Где находится middlware в парадигме Redux?

Middleware в Redux: архитектура и расположение

Где находится middleware

Redux middleware находится между dispatch() и reducer. Это промежуточный слой, который перехватывает actions перед тем, как они достигнут reducer.

Архитектурная позиция

Middleware находится в слое абстракции, отделяющем:

• Компоненты/Actions (что хочет произойти)
• Reducers (как меняется state)

Это позволяет добавлять side effects, логирование, асинхронность и другую бизнес-логику без изменения самих reducers и компонентов.

Как это работает (схема потока)

const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2, middleware3)
)

Структура middleware

Middleware в Redux имеет определенную архитектуру — это функция высшего порядка:

const myMiddleware = (store) => (next) => (action) => {
  console.log('Перед reducer:', action)
  const result = next(action)
  console.log('После reducer:', store.getState())
  return result
}

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

1. Логирование

const logger = (store) => (next) => (action) => {
  console.log('Dispatching:', action)
  const result = next(action)
  console.log('New state:', store.getState())
  return result
}

2. Асинхронные операции (redux-thunk)

const thunk = (store) => (next) => (action) => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState)
  }
  return next(action)
}

const fetchUser = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_START' })
  try {
    const response = await fetch(`/api/users/${userId}`)
    const data = await response.json()
    dispatch({ type: 'FETCH_SUCCESS', payload: data })
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', payload: error })
  }
}

store.dispatch(fetchUser(123))

3. Обработка ошибок

const errorHandler = (store) => (next) => (action) => {
  try {
    return next(action)
  } catch (error) {
    console.error('Error in action:', action, error)
    throw error
  }
}

Современные альтернативы

В новых проектах вместо Redux часто используют:

• Redux Toolkit — официальный способ писать Redux
• Zustand — более простой store
• Jotai/Recoil — атомарное состояние
• TanStack Query — для серверного состояния

Итого

Middleware в Redux:

• Находится между dispatch() и reducer
• Позволяет перехватывать и изменять actions
• Используется для async, логирования, аналитики, валидации
• Имеет архитектуру функции высшего порядка
• Мощный инструмент для управления side effects