Создание хранилища (Store)
Для хранения данных в приложении React с использованием Redux необходимо создать хранилище (Store). Это объект, содержащий все данные приложения. Для его создания используется функция createStore из модуля redux. Импорт функции осуществляется с использованием фигурных скобок {}:
import { createStore } from 'redux';
Хранилище объявляется как константа для предотвращения его переопределения:
const store = createStore();
Имя переменной store может быть произвольным.
Преобразователи (Reducers)
В Redux для управления данными приложения используются преобразователи (reducers). Название Redux происходит от слова «reducers». Преобразователи позволяют изменять состояние приложения в ответ на действия. Благодаря преобразователям, вся информация хранится в одном объекте, что упрощает работу с данными.
Создание преобразователя для данных о машинах (car.js)
Создадим простой преобразователь car.js, который будет хранить информацию о моделях автомобилей. Этот файл экспортирует функцию, возвращающую массив объектов, описывающих автомобили. Каждый объект содержит поля: id, model, speed, weight, img.
// car.js
export default function () {
return [
{ id: 1, model: 'Audi', speed: 244, weight: '1400 кг', img: 'URL картинки' },
{ id: 2, model: 'BMW', speed: 250, weight: '1500 кг', img: 'URL картинки' },
{ id: 3, model: 'Mercedes', speed: 260, weight: '1600 кг', img: 'URL картинки' }
];
}
Можно добавлять другие модели автомобилей в массив. Для других списков данных (например, список видеоуроков или музыкальных треков) необходимо создать отдельный преобразователь (например, music.js).
Объединение преобразователей (index.js)
Для объединения нескольких преобразователей и передачи их в createStore создадим файл index.js в папке reducers. Этот файл импортирует функцию combineReducers из redux и все необходимые преобразователи:
// reducers/index.js
import { combineReducers } from 'redux';
import car from './car';
export default combineReducers({
cars: car
});
Функция combineReducers принимает объект, ключи которого — имена частей состояния, а значения — функции-преобразователи. В данном случае, cars — имя части состояния, содержащей информацию о машинах, а car — функция-преобразователь из файла car.js. Дополнительные преобразователи (например, music) добавляются аналогично.
Использование объединенного преобразователя в хранилище
Импортируем объединенный преобразователь AllReducers из файла reducers/index.js и передадим его в функцию createStore:
import { createStore } from 'redux';
import AllReducers from './reducers';
const store = createStore(AllReducers);
Теперь хранилище store содержит данные из всех объединенных преобразователей. В последующих уроках будет показано, как извлекать и использовать эти данные.
В этом уроке мы научились создавать хранилище Redux и использовать преобразователи для управления данными приложения. Мы рассмотрели пример создания и объединения преобразователей для хранения информации о моделях автомобилей. Этот подход обеспечивает эффективную и масштабируемую организацию данных в приложении.