Redux сбивает с толку. Есть так много разных частей; действия, редукторы, магазины. Но что такое Redux в контексте приложения React? Зачем и как его использовать?

На эти вопросы я попытаюсь ответить, переведя свое супер простое приложение фотогалереи на использование redux для управления состоянием.

Что такое Redux? (на словах мы все можем понять)

Redux - это модуль npm, отвечающий за то, чтобы ваше приложение React не сохраняло состояние. Да я серьезно! Вашим компонентам больше не потребуется иметь переменные состояния или методы. Вместо этого мы создадим «Магазин» или отдельный объектный файл класса javascript, который будет содержать всю информацию о состоянии, относящуюся к приложению. У нас будет прямой доступ к этому магазину в любом месте нашего приложения.

Почему я должен его использовать?

Если ваше приложение React такое маленькое, как слайдер фотогалереи; вы действительно не увидите пользы от использования redux. Для больших сложных приложений с большим количеством файлов; redux - это способ оставить позади все заботы о передаче методов и переменных состояния в качестве свойств дочерним компонентам. Вам больше не нужно будет передавать методы на несколько уровней ниже на пути к желаемому компоненту.

Как мы его используем?

Возьмем ОЧЕНЬ простой пример; Слайд-шоу фотогалереи, как показано ниже:

Состояние приложения:

  1. Отображаемое текущее изображение: в моем случае это просто состояние компонента SlideShow Component (который находится под черным заголовком). Я выбрал правила именования фотографий, которые позволят мне просто отображать текущее изображение с целочисленным идентификатором (photo_1, photo_2 и т. Д.). По умолчанию установлено значение 1 для автоматического вызова photo_1 из папки фотографий.
  2. Метод следующего изображения: этот метод запускается щелчком правой стрелки, и он увеличивает текущий целочисленный идентификатор изображения на 1. Этот метод передается из компонента SlideShow следующей кнопке.
  3. Метод предыдущего изображения: этот метод запускается нажатием на стрелку влево, и он уменьшает текущий целочисленный идентификатор изображения на 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 для завершенного проекта: ссылка