Расскажите о потоке данных в Redux: от действия в компоненте до обновления данных в этом или другом компоненте.

Основная идея

Redux — это библиотека для управления состоянием, которая использует однонаправленный поток данных. Это означает, что данные всегда движутся по одному кругу: компонент → action → reducer → store → компонент. Такой подход упрощает отладку и делает поведение приложения предсказуемым.

Полный цикл

1. Компонент вызывает dispatch(action) — это единственный способ изменить состояние.
2. Action — это простой объект с полем type и, опционально, payload.
3. Reducer — чистая функция, которая принимает текущий state и action, и возвращает новый state.
4. Store сохраняет новый state и уведомляет всех подписчиков через subscribe.
5. Компоненты, подключенные через connect или useSelector, получают обновленные данные и перерисовываются.

Пример кода

// Action creator
const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: text
});

// Reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.payload, done: false }];
    default:
      return state;
  }
};

// Компонент
const TodoInput = ({ dispatch }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addTodo(inputValue));
  };
  return <form onSubmit={handleSubmit}>...</form>;
};

// Подключение
const mapDispatchToProps = { addTodo };
export default connect(null, mapDispatchToProps)(TodoInput);

Почему это важно

Однонаправленный поток упрощает отслеживание изменений: вы всегда знаете, откуда пришли данные и как они изменились. Это особенно полезно в больших приложениях, где много компонентов обмениваются состоянием. Redux также поддерживает middleware (например, Redux Thunk или Saga) для асинхронных действий, но базовый поток остается неизменным.

Итог: Redux стоит применять, когда состояние приложения становится сложным и требует предсказуемого управления. Он особенно полезен в крупных проектах с множеством взаимодействующих компонентов, где важно централизованное хранение данных и четкая логика их изменения.