Хранятся ли вместе action и reducer в Redux

«Хранятся ли вместе action и reducer в Redux» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В Redux action и reducer хранятся отдельно, но обычно в одной папке (например, store/). Action — это объект с type и данными, а reducer — чистая функция, обрабатывающая action.

Пример структуры:

// actions.js
export const increment = () => ({ type: 'INCREMENT' });

// reducer.js
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    default: return state;
  }
};

В современных проектах часто используют Redux Toolkit, где action creators и reducer объединяются в slice:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
  },
});

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;