Как интегрировать Redux в вашу программу с помощью React Native и Expo

kak integrirovat redux v vashu programmu s pomoshhyu react native

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

Требуется Redux

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

State и Props – это единственные два способа управления данными в компоненте. Реквизит – сокращение от свойства. В мире React следует соблюдать простое правило, что мы не должны мутировать или изменять значение реквизитов. В React поток данных однонаправленным или односторонним. То есть, данные всегда можно передать от родительского до дочернего компонента. Посмотрите ниже на этот простой пример:

X7XHOBi5wO0Yn4bEBdWMEMcS0kZlFT34Rxjy

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

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

Государство существует, чтобы изменить данные. Это единственная причина существования государства внутри каждого компонента. Когда мы хотим изменить состояние, мы используем this.setState() метод внутри компонента Этот метод повторно отображает компонент и все его дочерние компоненты для отображения изменений. Это работает как у React, так и у React Native одинаково, но внутренние элементы отличаются.

jTJ3lW05YTXLnkicAx0Zoz8YiTpvznDZacR8

Поскольку мы можем эффективно управлять состоянием и параметрами в приложении React Native, зачем нужен Redux? Ну, приведенный выше пример представляет малый минимум, а не сценарий настоящего времени. Представьте себе программу, например Instagram или Twitter. У вас есть разные экраны, и каждый экран может зависеть от одного-двух компонентов, например родительского и многократного дочернего компонента из нашего примера. Было бы тяжело отслеживать состояние каждого компонента.

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

Redux использует базовый механизм React, называемый контекстом. Мы не будем останавливаться, что такое контекст, поскольку он выходит за рамки настоящей статьи. Я просто хотел, чтобы вы знали, что ничего волшебного не происходит за кулисами.

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

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

Создание программы Pomodoro

Начало работы с Expo-CLI?

Для создания этой программы я намерен использовать последний инструмент, представленный командой Expo, который называется expo-cli. Установите его как глобальную зависимость, а затем инициализируйте новый проект React Native, используя его.

4GZRQSXWn5wCAjmiwUYhnILw8uvZhH1XFDHF

Чтобы проверить, работает ли все правильно в этом исходном состоянии, выполните следующую команду.

SjDkbrwoU5rCqYm7KT62qE7bTEsYLymhqMIF

Вам будет предложен следующий интерфейс. Уделите некоторое время, чтобы пройти через это. Если ранее вы создавали приложения с помощью Expo XDE или Create-React-Native-App, вы увидите, что мало что изменилось, за исключением того, что теперь Expo-CLI использует браузер Chrome.

nZH9NiAh1Bq1LtWo64t4eXptdwUgW75w6haQ

Выберите симулятор или устройство, на котором можно запускать Expo Client, как описано выше. Если вы получаете экран ниже, это означает, что наш проект React Native был инициализирован без каких-либо затруднений.

7HI7BGLwOwN-8p55RBd77tV367-2551uqvjw

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

Jm2jjrxqFuGKGIbROq0sxbZ9p1l3QqYx6fkh

Компонент таймера ⏱

Сначала мы создадим немой компонент Timer и соединим его с App.js. Добавьте следующий код в Timer/index.js:

YWNtoexuaX5Nv2MnP0-G0fB4QaqweuUvjjCX

Далее смените App.js файл:

dFthuKqcZKpECgVps3jXSLFP7bVleoRYbt3i
A5vxhakws61cLI6mISsgdKmR2Ca-mYSyWc9s

Теперь мы создадим статический компонент таймера, чтобы увидеть, как все вписывается. Мы начнем с модификации StatusBar. Затем определяем два Text элементы с react-native библиотека, чтобы указать, где будет отображаться фактический таймер и где будут отображаться кнопки для запуска и остановки таймера. Оба являются текстовыми полями.

VpxLf9bYCP1sLdfR2BUUAU2wWApLLEidkXYO
HwnZhyXMrvTccyXbApmC9uPKVJRf7ndUS9pd

Добавление кнопок?

В этом разделе мы собираемся заменить отображаемый раздел Start and Stop Buttons! с реальными кнопками. Мы будем использовать TouchableOpactiy чтобы это работало. А TouchableOpacity компонент действует как обертка для того, чтобы представления должным образом реагировали на касание. Непрозрачность обернутого представления (или кнопки в нашем случае) уменьшается каждый раз, когда пользователь затрагивает его.

Мы создаем компонент многоразового использования, поскольку нам требуются две кнопки: Пуск и Стоп.

km0-Zyv3Tyg4o8XoazPbpDRzje98onNZT15A

Это компонент без состояния, поэтому у него нет класса — он нужен только для представления кнопки в интерфейсе нашего приложения. Мы также импортируем иконки FontAwesome @expo/vector-icons, который является форком react-native-vector-icons и поставляется с expo SDK. Нет необходимости устанавливать его как отдельную зависимость. Чтобы отобразить значок, нам нужно его определить size.

Наконец, в вышеприведенном компоненте без состояния мы определяем propTypes. Я буду обсуждать, как и почему мы должны использовать PropTypes в программе React Native в другой статье.

В мобильном приложении события запускаются прикосновением. Для обработки этих событий мы будем использовать onPress. Здесь у нас будет всего два события, Start и Stop. Обе кнопки в нашем приложении будут использоваться onPressOut который отличается от onPress . The onPressOut вызывается всякий раз, когда пользователь отпускает прикосновение (когда пользователь перестает нажимать кнопку). Это называется раньше onPress и более точным в ситуации, подобной нашей, когда нам нужно запустить или остановить таймер, нажав кнопку, как только пользователь закончит.

Сейчас мы будем требовать этого Button компонент в нашем компоненте Таймер.

buCkAigjLxhgQkvMIBOfwodSO0p4I0mkCxCS
ciumY-jfK1zPYQG8Qn9ZU8sABf8whJsV2MBU

Интеграция Redux?

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

wvZ64BnNHI8mJMMnSJi4uwa27YukF07aqnYo

Теперь давайте начнем интегрировать Redux в наше приложение.

Действия?

В Redux состояние всей программы представлено одним объектом JavaScript. Подумайте об этом объекте как только для чтения, поскольку мы не можем вносить изменения в это состояние (который представлен в виде дерева) напрямую. Нам надо actions делать так.

Действия похожи на события в Redux. Они могут запускаться в виде щелчков мыши, нажатия клавиш, таймеров или сетевых запросов. Характер каждого упомянутого события переменен. Действие – это объект JavaScript. Чтобы определить действие, есть одно требование: каждое действие имеет собственное свойство типа. Мы определяем эти типы в файле под названием types.js:

IVm7vvhTO3PcoLzGW3JrgWMZ3UTi5OTUwhKI

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

В файле actions.js, нам понадобятся эти типы для определения создателей действий. Конструкторы действий – это функции, которые совершают действия.

FRPSp-IPWO5KlLX6yKCqQKBUdXBgdN9m5t71

Редукторы ?

Приемник действия известен как редуктор. Каждый раз, когда запускается действие, состояние программы меняется. Обработка состояния программы производится редукторами.

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

MyhoWXMag-F8DkaEFAfTXBBrmdVG8YqXv0c3

В нашем исходном состоянии мы определяем три атрибута: isPlaying, elapsedTime и timerDuration. В настоящее время таймер имеет значение по умолчанию 6 (секунд) для целей тестирования, но фактическое значение, которое мы собираемся изменить позже 25 (или 1500 секунд).

Тогда есть три вспомогательные функции:

  • applyStartTimer запустит таймер
  • applyRestartTimer остановит функцию таймера и установит все по умолчанию
  • и наконец, applyAddSecond проверит, прошло ли время меньше, чем общая продолжительность таймера. Если да, он прибавит еще одну секунду, чтобы увеличить свою ценность. В противном случае он вернет состояние по умолчанию и остановит работу функции таймера.

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

Это хороший ресурс, чтобы начать работу с Redux вообще от Дэна Абрамова, и он БЕСПЛАТНЫЙ!

Создание магазина Redux?

С помощью редуктора и исходного состояния мы можем создать объект магазина.

H7SgqQg0H2U9PhdlNRWC6nZdE-vFTu5yXhku

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

Чтобы связать React или React Native с Redux, вы делаете это с помощью react-redux модуль. Это делается с помощью компонента высокого порядка. Provider. Это в основном передает магазин в остальную программу.

Нам нужно связать разработчиков действий с нашей функцией Timer, чтобы сделать ее полностью функциональной (чтобы она реагировала на события, которые можно затрагивать, или на запуск или перезапуск таймера). Мы сделаем это в Timer/index.js функция.

Во-первых, мы импортируем необходимые зависимости для привязывания создателей действий.

Bf8plFKT3MiMQZLmC6Ndn5IjRLFW5vXwPLrj

bindActionCreators отображает функции действия объекта, используя имена функций действия. Эти функции автоматически посылают действие в магазин, когда функция вызывается. Чтобы сменить данные, нам нужно отправить действие. Чтобы включить это, нам нужны две вещи: mapStateToProps и mapDispatchToProps, и нам нужно соединить их оба с нашим компонентом. Это шаблонный код, который вы будете переписать.

Мы определяем эти две функции и меняем нашу export default после того, как мы определим стили наших представлений React Native.

g8SnUFvB9t4nDcc2ltNLK9Q4Z-6v1sFwZvqe

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

Завершение программы ⚛️ + ?

XmkxE9VFSSyhjfTQQrSa-vzDMZwfvPI4np9C

Я создал специальную функцию под названием formatTime чтобы отобразить время в правильном формате, но вы можете использовать любую библиотеку таймеров. Далее, чтобы увеличить значение времени, я использую метод жизненного цикла React componentWillReceiveProps. Я знаю, что вскоре он устарел, но пока он работает. Смотрите наше мини-приложение в действии ниже:

AojvxCzJ-eF1d943Owepa7qy0IQErcbAcGRx

Для краткости и демонстрации я использую только секунды для отображения таймера. Вы можете увеличить значение таймера, отредактировав значение константы TIMER_DURATION в reducers.js.

Мы дошли до конца статьи. Надеюсь, вам было столь же интересно читать, как и я писал. Вы можете найти полный код этой статьи в этом репозитории Github:

amandeepmittal/rn-pomodoro-example
rn-pomodoro-example – интеграция React Native + Reduxgithub.com

Вы помните, как я рассказывал вам о конкретной файловой структуре, которую я придерживался при внедрении архитектуры Redux? Ну это называется повторные утки шаблон, и вы можете найти больше деталей в этой информативной статье Алекса Молдована:

Масштабирование программы Redux с помощью уток
Как масштабируется интерфейсная программа? Как убедиться, что код, который вы пишете, поддерживается в течение 6 месяцев.medium.freecodecamp.org

? Чтобы получить дополнительные вопросы, свяжитесь со мной в Twitter или прочтите больше обо мне на моем веб-сайте.

Если вы хотите получить обновления по моей следующей статье о React Native, пожалуйста, подпишитесь на мою рассылку.

Добавить комментарий

Ваш адрес email не будет опубликован.