Как проектировать reducer: действия и типы?

Проектирование качественного редьюсера в React требует соблюдения определенных архитектурных принципов, которые обеспечивают предсказуемость и надежность приложения. Основой любой такой системы являются действия, которые лучше всего описывать с помощью типа union, объединяющего все возможные варианты в виде объектов с обязательным полем type и опциональным payload, например, { type: 'add', payload: string }.

При написании самой функции-редьюсера критически важно реализовывать так называемый exhaustive check внутри конструкции switch. Это гарантирует, что при добавлении нового типа действия в union TypeScript укажет на необходимость обработать его в редьюсере, предотвращая незапланированные баги в интерфейсе.

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

Все неизбежные побочные эффекты необходимо выносить за пределы редьюсера. Их следует обрабатывать в стандартных эффектах компонента через useEffect или переносить на уровень управления глобальным хранилищем, если используется сложная архитектура с middleware.

Каждый отдельно взятый action должен быть покрыт модульными тестами. Поскольку редьюсер представляет собой чистую функцию, написание тестов сводится к простой проверке соответствия входных параметров и ожидаемого состояния на выходе, что гарантирует стабильность приложения при рефакторинге.