Как reducer связан со store

1️⃣ Как кратко ответить

Reducer — это чистая функция, которая принимает текущее состояние и действие, возвращая новое состояние. Store в Redux хранит состояние приложения и использует reducer для обработки действий и обновления состояния.

2️⃣ Подробное объяснение темы

В контексте Redux, который является популярной библиотекой для управления состоянием в приложениях на JavaScript, reducer и store играют ключевые роли.

Store — это объект, который хранит состояние всего приложения. Он предоставляет методы для доступа к состоянию, отправки действий и подписки на изменения состояния. Store — это единственное место, где хранится состояние приложения в Redux.

Reducer — это чистая функция, которая определяет, как состояние приложения изменяется в ответ на действия (actions). Reducer принимает два аргумента: текущее состояние и действие, и возвращает новое состояние. Reducer не должен изменять переданное состояние, а должен возвращать новое состояние.

Как они связаны

1. Инициализация Store: Когда создается store, ему передается reducer. Это позволяет store знать, как обрабатывать действия и изменять состояние.

   import { createStore } from 'redux';
   ​
   // Пример простого reducer
   function counterReducer(state = { count: 0 }, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   ​
   // Создание store с использованием reducer
   const store = createStore(counterReducer);
   

   • createStore(counterReducer): Создает store и связывает его с counterReducer. Теперь store знает, как изменять состояние, используя этот reducer.

2. Обработка действий: Когда в приложение отправляется действие (action), store использует reducer для вычисления нового состояния.

   // Отправка действия для увеличения счетчика
   store.dispatch({ type: 'INCREMENT' });
   ​
   // Получение текущего состояния
   console.log(store.getState()); // { count: 1 }
   

   • store.dispatch({ type: 'INCREMENT' }): Отправляет действие в store.
   • store.getState(): Возвращает текущее состояние, которое было обновлено с помощью reducer.

3. Чистота функции: Reducer должен быть чистой функцией, что означает, что он не должен иметь побочных эффектов и должен возвращать одно и то же состояние для одних и тех же входных данных.

4. Подписка на изменения: Store позволяет подписываться на изменения состояния, чтобы обновлять пользовательский интерфейс или выполнять другие действия.

   // Подписка на изменения состояния
   const unsubscribe = store.subscribe(() => {
     console.log('State changed:', store.getState());
   });
   ​
   // Отправка действия
   store.dispatch({ type: 'INCREMENT' });
   ​
   // Отписка от изменений
   unsubscribe();
   

   • store.subscribe(): Регистрирует функцию, которая будет вызвана при каждом изменении состояния.
   • unsubscribe(): Функция, возвращаемая store.subscribe(), используется для отмены подписки.

Reducer и store работают вместе, чтобы обеспечить предсказуемое управление состоянием в приложении. Reducer определяет, как состояние изменяется, а store управляет состоянием и взаимодействует с приложением.