Что такое Redux: Store, Actions, Reducers

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 стоит использовать, когда:

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