Зачем вообще нужны state-менеджеры в React (Redux, Zustand, MobX)? Как они помогают вынести бизнес-логику и упростить компоненты?

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

State-менеджеры в React, такие как Redux, Zustand и MobX, используются для управления состоянием приложения, особенно когда оно становится сложным. Они помогают централизовать и организовать состояние, вынося бизнес-логику из компонентов, что упрощает их, делает код более предсказуемым и облегчает тестирование и поддержку.

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

В React компоненты могут иметь собственное состояние, которое управляется с помощью useState или useReducer. Однако, по мере роста приложения, управление состоянием может стать сложным, особенно если данные должны быть доступны в разных частях приложения. Здесь на помощь приходят state-менеджеры.

Зачем нужны state-менеджеры?

1. Централизация состояния: State-менеджеры позволяют хранить все состояние приложения в одном месте. Это упрощает доступ к данным из любого компонента, не требуя передачи данных через пропсы (props) по дереву компонентов.

2. Упрощение компонентов: Компоненты становятся более простыми и чистыми, так как они не содержат бизнес-логику. Вместо этого они подписываются на изменения состояния и реагируют на них.

3. Предсказуемость: Состояние приложения становится более предсказуемым, так как изменения состояния происходят через определенные действия (actions) и редьюсеры (reducers), что делает поведение приложения более контролируемым.

4. Тестируемость: Бизнес-логика, вынесенная из компонентов, становится легче тестируемой, так как она изолирована от UI-логики.

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

Рассмотрим пример использования Redux, одного из самых популярных state-менеджеров.

Пример кода

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});
​
// reducer.js
const initialState = { count: 0 };
​
export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};
​
// store.js
import { createStore } from 'redux';
import { counterReducer } from './reducer';
​
export const store = createStore(counterReducer);
​
// CounterComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';
​
const CounterComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
​
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};
​
export default CounterComponent;

Объяснение кода

• actions.js: Определяет действия, которые могут быть выполнены. В данном случае, increment — это действие, которое увеличивает счетчик.

• reducer.js: Определяет, как состояние приложения изменяется в ответ на действия. counterReducer принимает текущее состояние и действие, и возвращает новое состояние.

• store.js: Создает хранилище (store) с помощью createStore, используя редьюсер. Хранилище содержит состояние приложения и предоставляет методы для его изменения.

• CounterComponent.js: Компонент, который использует useSelector для доступа к состоянию и useDispatch для отправки действий. Компонент подписывается на изменения состояния и обновляется при их возникновении.

Применение

State-менеджеры особенно полезны в крупных приложениях, где требуется сложное управление состоянием. Они помогают избежать "проп-дриллинга" (передачи данных через множество уровней компонентов) и делают код более структурированным и поддерживаемым.