Что такое Redux

Question

Что такое Redux

Тип вопроса: Библиотеки Вероятность: 29% Категория: Frontend Разработчик

Ответ

Redux — это библиотека для управления состоянием приложения. Она основана на принципах Flux и использует однонаправленный поток данных.

Основные концепции:

Store — единый источник правды, хранит состояние всего приложения.
Actions — простые объекты, описывающие изменения (например, { type: 'ADD_TODO', payload: 'Learn Redux' }).
Reducers — чистые функции, которые принимают текущее состояние и action, возвращают новое состояние.

Пример:

const initialState = { todos: [] };

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
}

const store = createStore(todoReducer);
store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });

Плюсы:

Предсказуемость (изменения только через actions).
Централизованное состояние.
Легко тестировать (редьюсеры — чистые функции).

Минусы:

Избыточность для простых приложений.
Boilerplate-код.

Для современных проектов часто используют Redux Toolkit, который упрощает настройку.

Ответ 18+ 🔞

Слушай, а вот Redux, ну эта библиотека для управления состоянием, блядь. Представь себе, что у тебя в приложении бардак полный, данные разбросаны по углам, как носки после пьянки. Так вот, Redux — это такой строгий, ебаный немецкий бухгалтер, который приходит и наводит порядок. Один источник правды, один store, и всё по полочкам, ёпта!

Основные киты, на которых всё держится:

Store (Стор) — это, сука, священный грааль, единый и неделимый. Вся правда о состоянии твоего приложения живёт только тут. Никаких тайных тропок и чёрных ходов!
Actions (Экшены) — это такие бумажки-заявки. Хочешь что-то поменять? Не лезь в store с сапогами! Напиши заявление: { type: 'ДОБАВЬ_ХУЙНЮ', payload: 'Выучить Redux' }. Всё официально, блядь!
Reducers (Редьюсеры) — это уже сам бухгалтер, который эти заявки обрабатывает. Функция чистая, как слеза младенца. Принимает старое состояние и бумажку-экшен, а возвращает новое, пересчитанное состояние. Никаких побочных эффектов, нахуй!

Смотри, как это выглядит в коде, реальный пример:

const initialState = { todos: [] }; // Изначально список дел пуст, как твои карманы

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO': // Пришла бумажка "ДОБАВЬ_ДЕЛО"
      // Возвращаем НОВЫЙ объект состояния, старый не трогаем, ёбта!
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state; // Если бумажка непонятная — игнорируем
  }
}

const store = createStore(todoReducer); // Создали контору (store) с нашим бухгалтером (reducer)
store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' }); // Отправили заявку на добавление дела

Плюсы, блядь, очевидные:

Предсказуемость — хуй запутаешься. Изменения только через экшены, как через турникет.
Централизация — всё состояние в одном месте, не надо бегать по всему коду с криком "А где тут у нас счётчик?!".
Тестируемость — редьюсеры тестировать одно удовольствие, чистые функции же.

Но и минусы, ёпта, куда без них:

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

Поэтому сейчас все умные люди юзают Redux Toolkit. Это такая надстройка, которая, блядь, берёт этот немецкий порядок, но убирает тонны писанины. Короче, рекомендую, если проект серьёзный, а не "Hello World".