Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Как использовать пакет react-redux

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Не волнуйтесь - некоторые паттерны и модули уже стали лучшими практиками. Одним из них является Redux для управления состоянием приложения.

В этом видео из моего курса «Современные веб-приложения с помощью React и Redux» я покажу вам, как использовать пакет react-redux.

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

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

Как использовать пакет react-reduх

Зачем использовать react-redux?

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

Store code in React Redux

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

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

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

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

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

Как работает react-redux

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

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

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

Практический пример: разделение компонентов боковой панели

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

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

Установка react-redux

Конечно, нам нужно начать с установки библиотеки react-redux. Итак, давайте выполним npm install --save react-redux.

Когда библиотека будет установлена, мы можем продолжить импорт и импортировать ее с помощью import { Provider } from 'react-redux'; в нашем основном файле app.js. В этом файле нам действительно нужен только компонент поставщика, предоставляемый нам react-redux.

Теперь компонент поставщика фактически является частью react-redux, который собирается взять наш магазин и передать его этим компонентам. Фактически, что происходит за кулисами: поставщик использует контекстную функцию React. Поэтому, если у вас есть немного более сложный опыт React, и вы уже играли с контекстом раньше, это может дать вам представление о том, как именно работает поставщик.

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

top-level application component wrapped in a Provider component

И теперь наша заявка использует поставщика react-redux.

Использование функции connect()

Теперь давайте откроем наш файл боковой панели и давайте импортируем функцию connect() из react-reduxа. Функция connect() позволяет точно определить, какие свойства и функции мы хотим получить в компоненте контейнера, и затем мы можем взять это определение, применить его к презентационному компоненту и получить готовый компонент React.

Теперь я понимаю, что это звучит немного запутанно. Итак, давайте посмотрим, как это делается.

Existing sidebar component

Презентационный компонент

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

Прежде всего, наша боковая панель действительно интересуется только тем, как выглядят вещи. Конечно, компонент дает нам стиль разметки, и он вообще не знает о Redux. У нас есть эти методы, которые мы называем showAddDeck, addDeck и hideAddDeck, но эти методы знают о Redux. Боковая панель сама ничего не знает о Redux. Фактически, если бы мы хотели убрать Redux из этого проекта и использовать какую-то альтернативу, мы могли бы просто изменить определения этих функций, и этот компонент боковой панели не должен меняться вообще. Он просто вызывает эти функции.

Как он считывает данные? Ну, он просто читает данные из свойств, которые мы ему дали. Как насчет изменения данных? Ну, он просто вызывает обратные вызовы из свойств. У нас есть три метода, и когда он вызывает их, данные в хранилище изменяются. И, наконец, конечно, да, это все написано вручную. И, как вы увидите через секунду, компоненты контейнера будут генерироваться с помощью react-redux.

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

Поэтому я просто собираюсь скопировать эти строки:

Lines to copy from Sidebar component code

И я собираюсь вставить их наверху здесь:

Lines pasted at the top of the file

Создание функций сопоставления

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

Итак, теперь нам нужно создать две функции, которые будут отображать состояние в эти свойства. Традиционно в React эти функции называются mapStateToProps и mapDispatchToProps.

Итак, давайте начнем с mapStateToProps. Это функция, которая получит последнее состояние из магазина.

Нам просто нужно вернуть объект, который будет иметь два свойства, и, как мы уже видели, это свойства decks и addDeck. Поэтому я могу просто скопировать и вставить их здесь, потому что это практически те же данные - нам просто нужно преобразовать этот синтаксис в синтаксис литерала объекта вместо синтаксиса JSX.

mapStateToProps function

Таким образом, вот наша функция mapStateToProps. В принципе, он просто берет текущее состояние из хранилища, и возвращает любые данные или компонент презентации. Для этого нужны decks и свойство addDeck, поэтому мы возвращаем объекты внутри объекта.

Очистим код

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

Однако теперь у нас есть фигурные скобки вокруг объектного литерала, и JavaScript будет думать, что это функциональный блок, поэтому мы обернем их в круглые скобки.

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

Конечно, тогда, внутри этой функции, мы не будем использовать state.decks, а просто запишем decks. И мы не пишем больше state.addingDeck, мы просто используем addDeck. И теперь я думаю, вы можете видеть, к чему мы двигаемся, так как что ключ и свойство имеют одно и то же имя, мы можем избавиться от одного из них, и можем просто написать decks и addingDeck.

И вот более короткая версия нашей функции благодаря ES6.

Shorter version of mapStateToProps

Итак, как насчет mapDispatchToProps? Ну, это тоже функция, и она будет принимать dispatch в качестве единственного параметра. Теперь dispatch, конечно, является функцией отправки магазина.

Еще раз, мы просто собираемся возвращать объектный литерал, поэтому не забудьте эти круглые скобки, и внутри нам нужны три свойства, которые у нас есть наверху: addDeck, showAddDeck и hideAddDeck. Итак, теперь у нас есть функция, которая отображает функцию отправки на три обратных вызова, которые нужны для боковой панели.

mapDispatchToProps function

Итак, теперь у нас есть все необходимое для создания нашего контейнерного компонента. У нас есть две функции, которые будут отображать наш объект состояния в нашей функции dispatch  в свойства, необходимые этой функции. И у нас есть презентационный компонент, который ожидает эти свойства.

Теперь функция connect() - это то, что мы можем использовать для соединения этих двух функций отображения с презентационным компонентом. Эта функция соединения будет возвращать наш контейнерный компонент. Мы на самом деле не собираемся писать другой компонент здесь, вместо этого мы передаем эти три части функции connect(), и она вернет наш компонент контейнера.

Итак, внизу, вместо экспорта боковой панели, давайте экспортируем вызов connect(). Мы передадим ему два параметра - функции mapStateToProps и mapDispatchToProps - и connect() вернет новую функцию.

Теперь то, что фактически экспортируется из этого файла, не является презентационной боковой панелью, а вместо этого это наш новый компонент контейнера, который вне этой функции мы все еще можем назвать <Sidebar>.

Итак, это был пакет react-redux в действии. Вы можете просмотреть исходные файлы курса на GitHub, чтобы узнать, как работает этот код в полном объеме.

Просомтрите полный курс

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

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

По пути вы получите возможность повысить свои навыки ES6 (ECMAScript 2015) и изучить шаблоны и модули, которые лучше всего работают с React и Redux!

Вы также можете повысить свои навыки React с этими курсами:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.