Как работает схема redux: подробное объяснение на примерах

Redux – это популярная и мощная библиотека JavaScript, которая используется для управления состоянием приложения. Следуя принципу однонаправленного потока данных, Redux упрощает процесс управления состоянием и обновления интерфейса. Но как именно это происходит?

В центре схемы Redux находится хранилище (store), в котором хранится состояние всего приложения. Оно является единственным источником истины и изменяется только с помощью действий (actions). Действия представляют собой простые объекты, содержащие тип (type) и, по желанию, полезную нагрузку (payload).

Например, одно из действий может выглядеть следующим образом:

{ type: 'ADD_TODO', payload: 'Learn Redux' }

Когда действия создаются, они передаются в редюсеры (reducers). Редюсеры – это чистые функции, которые принимают текущее состояние и действие, и возвращают новое состояние. Они не изменяют состояние напрямую, а создают новую копию на основе текущего состояния и изменений.

Пример простого редюсера:

function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'REMOVE_TODO':
return state.filter(todo => todo !== action.payload);
default:
return state;
}
}

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

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

Содержание

Основные понятия Redux
Работа с Redux: шаг за шагом
Действия (Actions) в Redux
Редюсеры (Reducers) в Redux
Хранилище (Store) в Redux
Пример использования схемы Redux
Преимущества и недостатки Redux
Преимущества Redux:
Недостатки Redux:
Сопоставление схемы Redux с альтернативными подходами

Основные понятия Redux

Основными понятиями в Redux являются:

Store: это централизованное хранилище данных, где хранится состояние всего приложения. Оно является неизменяемым и может быть изменено только с помощью специальных функций-редюсеров.
Action: это объект, который описывает изменение состояния. Он содержит тип (type) и необязательные данные (payload), которые передаются в редюсеры для обновления хранилища.
Reducer: это чистая функция, которая принимает текущее состояние и действие, и возвращает новое состояние. Редюсеры являются единственным источником правды в Redux и должны быть чистыми и предсказуемыми.
Action Creator: это функция, которая создает и возвращает объект действия. Она инкапсулирует внутри себя логику создания действия и может принимать аргументы, которые станут данными действия.
Middleware: это слой, который позволяет расширить функциональность Redux. Он используется для обработки асинхронных действий, логирования, маршрутизации и других сценариев.
Selector: это функция, которая извлекает определенные данные из состояния Redux. Она помогает избежать прямой работы с состоянием и упрощает доступ к нужным данным.

Сочетание всех этих понятий позволяет разрабатывать масштабируемые и легко поддерживаемые приложения, где изменение состояния происходит предсказуемо и контролируемо.

Работа с Redux: шаг за шагом

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

Установка Redux: Первым шагом необходимо установить Redux с использованием менеджера пакетов npm командой: npm install redux.
Создание хранилища: Для работы с Redux необходимо создать хранилище, которое будет содержать все состояние приложения. Хранилище создается при помощи функции createStore и принимает в себя основной редьюсер приложения.
Определение редьюсеров: Редьюсеры отвечают за обновление состояния в Redux. Редьюсеры — это функции, которые принимают предыдущее состояние и действие, и возвращают новое состояние. В Redux обычно создается один главный редьюсер, который сочетает все остальные редьюсеры.
Определение действий: Действия — это объекты, которые описывают, что происходит в приложении. Действия передаются в редьюсеры и используются для обновления состояния. Обычно действия определяются в виде функций, которые возвращают объекты с необходимыми данными.
Использование компонентов: Чтобы связать компоненты React с Redux, необходимо использовать специальные функции-обертки. Функция connect позволяет связать компонент с хранилищем Redux и использовать состояние и действия внутри компонента.

Каждый из этих шагов является важным для правильного использования Redux. В результате выполнения всех шагов, вы получите мощный инструмент для управления состоянием вашего приложения.

Поэтому, следуя этим шагам, вы сможете эффективно работать с Redux и упростить управление состоянием в своем приложении.

Действия (Actions) в Redux

Каждое действие обязательно содержит тип (type), который является строковым значением и определяет, какое именно действие произошло. Все действия должны быть уникальными.

Дополнительно, действия могут содержать другие свойства, которые передают дополнительные данные к хранилищу. Такие свойства могут быть полезными при обновлении состояния приложения.

Пример действия:

{ type: 'ADD_TODO', text: 'Купить продукты' }

Для отправки действия в хранилище, необходимо использовать функцию dispatch. Она принимает действие в качестве аргумента и передает его в редукторы (reducers).

В редукторах происходит обработка действий. Редукторы являются чистыми функциями, которые принимают предыдущее состояние (state) и действие (action) в качестве аргументов, и возвращают новое состояние. Редукторы могут использоваться для изменения состояния хранилища в соответствии с типом действия.

Пример редуктора:


function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
];
default:
return state;
}
}

В данном примере, редуктор todos обрабатывает действие ADD_TODO. Он добавляет новый элемент в состояние приложения — список задач (todos), содержащий текст задачи и флаг, указывающий на то, выполнена она или нет.

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

Редюсеры (Reducers) в Redux

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

Редюсеры объединяются в древовидную структуру, называемую «корневым редюсером» или «главным редюсером». Этот главный редюсер передается в функцию createStore(), и он отвечает за создание и обновление глобального состояния приложения.

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

Редюсеры реализуются в виде функций, принимающих два аргумента: состояние (state) и действие (action). Они могут использовать switch-оператор для определения типа действия и выполнения соответствующих изменений в состоянии.

Редюсер	Описание
usersReducer	Отвечает за хранение списка пользователей
currentUserReducer	Отвечает за хранение информации о текущем пользователе

Редюсеры обычно используются вместе со структурой данных, называемой «Store» (хранилище). Оно представляет собой объект, который хранит текущее состояние приложения и предоставляет методы для изменения этого состояния. Redux предоставляет функцию createStore(), которая создает экземпляр хранилища на основе главного редюсера.

Каждый раз, когда происходит действие, оно отправляется в хранилище. Хранилище вызывает главный редюсер и передает ему текущее состояние и действие. Редюсер возвращает новое состояние, которое затем становится текущим состоянием приложения.

Использование редюсеров позволяет разделить логику изменения состояния на более мелкие и понятные части. Это делает код более модульным и позволяет легко добавлять новые функциональности и изменять существующие.

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

Хранилище может быть только одно для всего приложения, и оно доступно из любого компонента, что позволяет легко обновлять и получать данные из состояния.

Хранилище в Redux является неизменяемым, что означает, что его нельзя прямо изменять. Вместо этого, для обновления состояния, мы создаем новый объект, основанный на предыдущем состоянии, с помощью чистых функций, называемых «редюсерами».

Основная функция хранилища — позволить компонентам управлять состоянием приложения с помощью действий (actions) и получать эти данные в других компонентах. Хранилище также предоставляет методы для подписки на изменения состояния и отписки от них.

В Redux хранилище создается с помощью функции createStore, которая принимает редюсер как аргумент. Редюсер определяет, как будет происходить обновление состояния приложения в зависимости от переданных действий.

Пример создания хранилища:

const initialState = {
counter: 0,
todos: []
};
function reducer(state = initialState, action) {
switch (action.type) {
case "INCREMENT":
return { ...state, counter: state.counter + 1 };
case "ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };
default:
return state;
}
}
const store = createStore(reducer);

В данном примере создается хранилище с исходным состоянием initialState и редюсером reducer, который обновляет состояние в зависимости от переданных действий. Режим работы редюсера определяется с помощью оператора switch. В данном примере редюсер обрабатывает два действия — увеличение счетчика и добавление элемента в список задач.

Теперь, после создания хранилища, мы можем получать и обновлять состояние приложения с помощью функций, доступных в объекте store. Например, чтобы получить текущее состояние, можно воспользоваться методом getState:

const currentState = store.getState();
console.log(currentState);

Также, мы можем отправить действия для обновления состояния с помощью метода dispatch. Например, чтобы увеличить счетчик, можно сделать следующее:

store.dispatch({ type: "INCREMENT" });

Действия, отправленные в хранилище, будут переданы редюсеру, который определит, какое действие нужно выполнить.

Хранилище также позволяет подписываться на изменения состояния с помощью метода subscribe. Например, чтобы выполнять определенные действия при изменении состояния, можно сделать следующее:

store.subscribe(() => {
const currentState = store.getState();
console.log("State changed:", currentState);
});

Хранилище имеет очень важную роль в архитектуре Redux и позволяет эффективно управлять состоянием приложения. Правильное использование хранилища позволяет сделать код более понятным, легко поддерживаемым и масштабируемым.

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

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

Допустим, у нас есть приложение «Todo list» (список дел), которое позволяет пользователям добавлять и удалять задачи. Каждая задача имеет уникальный идентификатор и текстовое описание.

Для начала, создадим состояние нашего приложения. В Redux состояние представляет собой объект, который содержит все данные приложения:


const initialState = {
tasks: []
};

Затем, определим действия, которые может совершать пользователь. В нашем приложении есть два действия: добавить задачу и удалить задачу. Каждое действие представляет собой объект, который содержит тип и данные:


const ADD_TASK = 'ADD_TASK';
const REMOVE_TASK = 'REMOVE_TASK';
function addTask(task) {
return {
type: ADD_TASK,
payload: task
};
}
function removeTask(taskId) {
return {
type: REMOVE_TASK,
payload: taskId
};
}

Теперь определим редьюсеры — функции, которые обрабатывают действия и изменяют состояние приложения:


function taskReducer(state = initialState.tasks, action) {
switch (action.type) {
case ADD_TASK:
return [...state, action.payload];
case REMOVE_TASK:
return state.filter(task => task.id !== action.payload);
default:
return state;
}
}

Далее, объединим все редьюсеры в один корневой редьюсер:


import { combineReducers } from 'redux';
const rootReducer = combineReducers({
tasks: taskReducer
});

Теперь создадим хранилище, используя функцию createStore из Redux:


import { createStore } from 'redux';
const store = createStore(rootReducer);

Используя хранилище, мы можем обновлять состояние приложения и получать текущее состояние:


store.dispatch(addTask({ id: 1, description: 'Сделать покупки' }));
store.dispatch(addTask({ id: 2, description: 'Починить автомобиль' }));
console.log(store.getState()); // { tasks: [{ id: 1, description: 'Сделать покупки' }, { id: 2, description: 'Починить автомобиль' }] }

В этом примере мы использовали схему Redux для создания простого приложения «Todo list». С помощью действий, редьюсеров и хранилища мы можем управлять состоянием приложения и отслеживать его изменения.

Преимущества и недостатки Redux

Преимущества Redux:

Централизованное хранилище состояния: Redux использует единое хранилище для всего состояния приложения. Это позволяет упростить управление состоянием и улучшить отладку и тестирование. Кроме того, это упрощает передачу состояния между компонентами.
Предсказуемость и отслеживаемость: Изменения состояния в Redux происходят только через специальные функции, называемые «reducers». Это делает изменения состояния предсказуемыми и отслеживаемыми, что упрощает отладку и обнаружение ошибок.
Возможность использовать middleware: Redux позволяет использовать middleware для изменения поведения приложения. Это позволяет добавлять дополнительную функциональность, такую как логирование, асинхронные запросы и т.д.
Поддержка инструментов разработчика: Redux имеет различные инструменты разработчика, такие как расширение Redux DevTools, которые упрощают отладку и анализ состояния приложения во время разработки.
Широко распространенная и поддерживаемая: Redux является одним из наиболее популярных паттернов управления состоянием в сообществе JavaScript. Он имеет большое сообщество разработчиков, где можно найти множество руководств, документации, вопросов и ответов.

Недостатки Redux:

Большое количество кода: Использование Redux требует написания дополнительного кода, такого как reducers, actions и selectors. Это может увеличить размер и сложность проекта.
Излишний уровень абстракции: В больших проектах с простыми потоками данных Redux может казаться избыточным и создавать дополнительные сложности для разработчиков.
Обновление состояния: В некоторых случаях обновление состояния в Redux может потребовать дополнительных усилий, особенно при работе с асинхронными действиями или сложными взаимодействиями между компонентами.

В целом, несмотря на некоторые недостатки, использование Redux может значительно улучшить организацию и управление состоянием в больших и сложных приложениях. Он предлагает множество преимуществ, таких как централизованное хранилище, предсказуемость и возможность использования middleware, что делает его одним из наиболее популярных инструментов для управления состоянием в экосистеме JavaScript.

Сопоставление схемы Redux с альтернативными подходами

Существует несколько альтернативных подходов к управлению состоянием при разработке веб-приложений. Вот несколько из них:

Альтернатива 1: Локальное состояние компонентов

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

Альтернатива 2: Шина событий

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

Альтернатива 3: Централизованное хранилище

Схема Redux предлагает альтернативный подход — использование централизованного хранилища состояния. В этой схеме состояние приложения хранится в одном месте, из которого компоненты могут его получать и обновлять. Это упрощает управление состоянием и упрощает отслеживание иерархии компонентов. Кроме того, использование Redux позволяет легко отслеживать историю изменений состояния, отменять и повторять действия.

В целом, схема Redux предоставляет удобный и мощный инструмент для управления состоянием веб-приложений, обеспечивая единообразие, предсказуемость и масштабируемость кода. Выбор подхода зависит от конкретной задачи, но использование схемы Redux часто является хорошим выбором для средних и больших проектов.

Как работает схема redux — подробное объяснение на примерах