Весной стартует сезон найма, успей отхватить свой оффер!

Что такое Redux?

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

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

Store (Хранилище)

  • Единственное место хранения состояния всего приложения
  • Создается с помощью функции createStore
  • Предоставляет методы для доступа к состоянию и его обновления

Actions (Действия)

  • Простые JavaScript-объекты, описывающие что произошло
  • Должны иметь свойство type
  • Могут содержать дополнительные данные
const action = {
  type: 'ADD_TODO',
  payload: 'Изучить Redux'
};

Reducers (Редьюсеры)

  • Чистые функции, которые принимают текущее состояние и action
  • Возвращают новое состояние
  • Никогда не изменяют существующее состояние
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
};

Принципы Redux

  1. Единственный источник правды

    • Все состояние приложения хранится в одном объекте внутри одного store
  2. Состояние только для чтения

    • Единственный способ изменить состояние — отправить action
    • Все изменения происходят централизованно и в строгом порядке
  3. Изменения делаются с помощью чистых функций

    • Reducers — это чистые функции
    • Они принимают предыдущее состояние и action, возвращают следующее состояние

Пример использования Redux

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

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

// Store
const store = createStore(todoReducer);

// Подписка на изменения
store.subscribe(() => console.log(store.getState()));

// Отправка действия
store.dispatch(addTodo('Изучить Redux'));

Когда использовать Redux?

Redux стоит использовать, когда:

  • У вас сложное состояние приложения
  • Состояние часто обновляется
  • Логика обновления состояния сложная
  • Приложение имеет средний или большой размер кодовой базы
  • Много разработчиков работают над проектом

Важно помнить:

Redux добавляет дополнительную сложность в приложение. Для небольших проектов может быть достаточно встроенного управления состоянием React.