Redux сбивает с толку. Есть так много разных частей; действия, редукторы, магазины. Но что такое Redux в контексте приложения React? Зачем и как его использовать?
На эти вопросы я попытаюсь ответить, переведя свое супер простое приложение фотогалереи на использование redux для управления состоянием.
Что такое Redux? (на словах мы все можем понять)
Redux - это модуль npm, отвечающий за то, чтобы ваше приложение React не сохраняло состояние. Да я серьезно! Вашим компонентам больше не потребуется иметь переменные состояния или методы. Вместо этого мы создадим «Магазин» или отдельный объектный файл класса javascript, который будет содержать всю информацию о состоянии, относящуюся к приложению. У нас будет прямой доступ к этому магазину в любом месте нашего приложения.
Почему я должен его использовать?
Если ваше приложение React такое маленькое, как слайдер фотогалереи; вы действительно не увидите пользы от использования redux. Для больших сложных приложений с большим количеством файлов; redux - это способ оставить позади все заботы о передаче методов и переменных состояния в качестве свойств дочерним компонентам. Вам больше не нужно будет передавать методы на несколько уровней ниже на пути к желаемому компоненту.
Как мы его используем?
Возьмем ОЧЕНЬ простой пример; Слайд-шоу фотогалереи, как показано ниже:
Состояние приложения:
- Отображаемое текущее изображение: в моем случае это просто состояние компонента SlideShow Component (который находится под черным заголовком). Я выбрал правила именования фотографий, которые позволят мне просто отображать текущее изображение с целочисленным идентификатором (photo_1, photo_2 и т. Д.). По умолчанию установлено значение 1 для автоматического вызова photo_1 из папки фотографий.
- Метод следующего изображения: этот метод запускается щелчком правой стрелки, и он увеличивает текущий целочисленный идентификатор изображения на 1. Этот метод передается из компонента SlideShow следующей кнопке.
- Метод предыдущего изображения: этот метод запускается нажатием на стрелку влево, и он уменьшает текущий целочисленный идентификатор изображения на 1. Этот метод передается от компонента SlideShow к кнопке prev.
Переход на Redux за 7 шагов
Прежде чем мы начнем, в корневом каталоге (где находится файл модулей узлов) давайте установим:
npm install redux
npm install response-redux
1) Инициализируйте хранилище:
В корневом каталоге вашего приложения для реагирования создайте файл store.js.
import { createStore } from ‘redux’; import allReducers from ‘./reducers’; //will later be explained const store = createStore(allReducers); export default store;
В этот момент вам должно быть интересно, что это за импорт allReducers, который мы передаем в магазин, который мы создали ... Что ж, давайте пока не будем об этом беспокоиться.
2) Подключите магазин к компоненту приложения корневого уровня:
Убедитесь, что в вашем файле index.js вы импортировали Provider из response-redux, а также из магазина, который мы только что создали. Мы обернем корневой компонент приложения в этот компонент Provider и передадим хранилище в качестве опоры для него, например:
import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’; import { Provider } from ‘react-redux’; import App from ‘./App’; import store from ‘./store’; import * as serviceWorker from ‘./serviceWorker’; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById(‘root’)); serviceWorker.unregister();
3) Создайте редуктор, который будет обрабатывать различные входящие действия (или, другими словами, инициированные методы), и обязательно измените конкретное состояние соответствующим образом:
Создайте новый файл с именем src / reducers / slideShowReducer.js и введите внутри него:
Этот редуктор будет принимать разные действия и направлять их в нужную логику с помощью простого оператора switch.
4) Создайте файл связывания редукторов ... В этом приложении есть только один редуктор, но у большинства приложений будет несколько ... Этот файл объединения - сложная концепция для понимания, имея только один редуктор, поэтому, пожалуйста: просто скопируйте код (см. Обезьяна, обезьяна do), и это будет уточнено позже.
Создайте новый файл с именем src / reducers / index.js и внутри:
5) Создайте действия. Это самая сложная часть для понимания в redux… поскольку большинству людей кажется, что мы уже обработали «методы» в нашем файле-редукторе. Что ж, мы должны отправить файлу редуктора некоторую информацию о том, какое «действие» мы хотим, чтобы оно выполнялось. Мы должны указать ему, какой случай переключения он должен выполнить.
Для этого:
Создайте новый файл с именем src / actions / slideShowActions.js, и внутри у нас будет два типа действий, как показано ниже:
Если вам нравятся перечисленные выше функции - особо ничего не делайте:
Поздравляем! вы начинаете получать сокращение. Вышеупомянутые функции будут просто служить мостом между нашими фактическими компонентами и редукторами ... здесь важно то, что они возвращают тип, чтобы указать, какое действие переключателя редуктора выполнить, и полезную нагрузку это переменная, переданная в метод…
6) Подключите «умный» компонент в своем приложении: это относится к компоненту, который вы хотите стереть его состояния и методы, и напрямую подключиться к хранилищу redux ... В этом примере это компонент SlideShow:
Вверху файла сделайте соответствующий импорт из redux, который мы скоро будем использовать:
import React, { Component } from “react”; import { bindActionCreators } from ‘redux’; import { connect } from ‘react-redux’; import { nextImage, prevImage } from ‘../../actions/slideShowActions’;
обратите внимание, что я импортировал две функции из внешних модулей, связанных с redux, НО ТАКЖЕ я импортировал свои действия в файл компонента!
затем подключите компонент к оператору экспорта в нижней части файла, например:
export default connect(mapStateToProps, matchDispatchToProps)(SlideShow);
Да: у нас есть две скобки, следующие друг за другом - это странно, и это правильный способ сделать это!
Вам должно быть интересно, что такое mapStateToProps и matchDispatchToProps; ну, это просто ... он вызывает переменные или методы из магазина в ваш компонент в качестве свойств ... Теперь все стало опорой!
mapStateToProps и matchDispatchToProps
7) Обязательно запускайте методы магазина при нажатии кнопок:
handleClick принимает анонимную функцию, которая указывает на this.props.prevImage или this.props.nextImage… Обратите внимание, что методы теперь являются опорой этого компонента. То же самое можно сказать и о currentImageID, который указывает на this.props.currentImageID.
Полный файл компонента для справки:
Подводить итоги
Наше крошечное приложение React теперь официально Reduxed! По мере роста приложения преимущества использования redux станут яснее…
Это руководство эффективно объясняет различные части приложения response-redux, однако, если вы ищете практическое руководство, обратитесь к этой серии YouTube, написанной Баки: https://www.youtube.com/watch?v= DiLVAXlVYR0
Репозиторий Git для завершенного проекта: ссылка