Автор оригинала: FreeCodeCamp Community Member.
Redux – важная часть реактивной нативной экосистемы. Если ваш мир вращается вокруг JavaScript, вы, наверное, слышали о Redux. Прежде чем прочитать оставшуюся часть учебного пособия и идти дальше, просто попробуйте помнить, что вы только узнаете о Redux, потому что это облегчает вам вещи, и не сложнее. Теперь давайте узнаем, почему вам нужен redux в вашем приложении.
Нужно для redux.
Строительство реагирования или реагирования собственного применения в реальном мире может стать сложным, если не имеет правильного способа обработки данных. Если в любой момент данные не управляются, все выйдет из-под контроля. Если вы знакомы с React или React Nature, вы знаете, что способ обработки данных по умолчанию – сохранить его в компонентном состоянии и передавать его на компоненты для детей в качестве реквизита.
Состояние и реквизиты являются единственными двумя способами управления данными в компоненте. Реквизит коротко для характеристики. Это простое правило, чтобы следовать в реактивный мир, который мы не должны мутировать или изменять значение реквизитов. В реакции поток данных является однонаправленным или одним способом. То есть данные всегда могут быть переданы от родителя к дочерним компоненте. Посмотрите ниже на этом простом примере:
В приведенном выше примере мы создаем два компонента (родитель и ребенок) в отдельных файлах. Родительский компонент состоит из представления, где отображается дочерний компонент. В дочернем компоненте представление оказывает текстовое сообщение, которое входит из реквизита. Входящее сообщение доступно в качестве данных в состоянии родительского компонента.
Таким образом, дочерний компонент может быть повторно использован с другими родительскими компонентами, так что каждый родительский компонент может иметь свои собственные данные для рендеринга. Обратите внимание, что мы не модифицируем стоимость Это .props в любой момент.
Государство там для мутата данных. Это единственная причина, по которой состояние существует в каждом компонент. Всякий раз, когда мы хотим изменить состояние, мы используем this.settate () Метод в компоненте. Этот метод переназначает компонент и все его дочерние компоненты, чтобы отразить изменения. Это работает как в реагированных, так и реагирует на нативных, но внутренние органы разные.
Поскольку мы можем управлять состоянием и реквизитором настолько эффективно в нативном приложении RACT, почему redux необходимо? Ну а вышеприведенный пример представляет собой минимальный минимум, а не сценарий в реальном времени. Представьте себе приложение, как Instagram или Twitter. У вас есть разные экраны, и каждый экран может зависеть от компонента или двух, таких как родитель и многоразовые дочерние компоненты из нашего примера. Было бы трудно отслеживать состояние каждого компонента.
Redux является одним из наиболее распространенных способов обработки данных. Он позволяет совместно использовать состояние как глобальный атрибут, что целое реагирующее нативное приложение может использовать и получать в форме реквизитов. Это известно как создание магазина в redux. Redux упрощает состояние, перемещая его в одно место.
Redux использует базовый механизм реагирования под названием контекст. Мы не собираемся жить, в каком контексте есть, поскольку оно не имеет возможности этой статьи. Я просто хотел, чтобы вы знали, что ничего магического не происходит за кулисами.
Просто помните следующие условия, поскольку мы собираемся увидеть их в действии в руководстве ниже:
- Действия
- Редукторы
- Магазин
Ключ к изучению redux – это практика. Я не хочу делиться слишком большой информацией и вручную сейчас. Итак, давайте начнем с создания демонстрации демонстрации для изучения Redux.
Создание приложения Pomodoro
Начало работы с EXPO-CLI?
Чтобы создать это приложение, я собираюсь использовать последний инструмент, представленный Экспо Команда называется EXPO-CLI Отказ Установите его как глобальную зависимость, а затем инициализируйте новый реагировать нативный проект, используя его.
Чтобы увидеть, правильно ли все работает в этом начальном состоянии, запустите следующую команду.
Вам будет предложено в следующем интерфейсе. Займите некоторое время, чтобы пройти через него. Если у вас есть создание приложений, используя EXPO XDE или Create-raction-action-app, вы увидите, что не так много изменилось, за исключением того, что теперь Expo-CLI использует браузер Chrome.
Выберите симулятор или устройство, которое может запустить клиенту EXPO, как отмечено в приведенном выше изображении. Если вы получите экран ниже, это означает, что наш реагированный нативный проект был инициализирован без каких-либо трудностей.
С этим создайте следующие файлы и папки внутри Компоненты каталог. Я буду обсуждать, почему мы следуем этой структуре каталога позже. На данный момент наша первоначальная установка завершена, и мы можем начать строить наше приложение.
Компонент таймера ⏱.
Во-первых, мы создадим тупой компонент таймера и подключаю его с App.js Отказ Добавьте следующий код в Таймер/index.js :
Далее измените App.js файл:
Теперь мы сделаем статический компонент таймера, чтобы увидеть, как все вписывается. Мы начнем с модификации Статус BAR Отказ Тогда мы определяем два Текст Элементы из Реагистративно Библиотека Чтобы указать, где будет отображаться фактический таймер и где будут отображаться кнопки для запуска и остановки таймера. На данный момент оба являются текстовыми полями.
Добавление кнопок?
В этом разделе мы собираемся заменить раздел, который отображает Пуск и остановка кнопок! с фактическими кнопками. Мы будем использовать Touchableopactiy сделать эту работу. А TapableApacity Компонент действует как обертка для изготовления видов реагировать правильно, чтобы коснуться. Непрозрачность обернутого вида (или кнопки в нашем случае) уменьшается всякий раз, когда пользователь касается его.
Мы создаем многоразовый компонент, так как нам нужны две кнопки: запуск и остановка.
Это нестандартный компонент, поэтому у него нет класса – нам нужно только представлять кнопку в UI нашего приложения. Мы также импортируем иконы Fontawesome от @ Expo/Vector-Icons , который представляет собой вилку реактивно-векторных иконок и поставляется непосредственно с EXPO SDK. Не нужно устанавливать его как отдельная зависимость. Чтобы отобразить значок, нам нужно определить его Размер Отказ
Наконец, в приведенном выше компонент без природы, мы определяем Пропорты Отказ Я буду обсуждать, как и почему мы должны использовать пропипсы в реактивном нативном применении в другой статье.
В мобильном приложении события запускаются прикосновением. Чтобы обработать эти события, мы собираемся использовать onpress Отказ У нас будет только два события, начните и остановиться. Обе кнопки в нашем приложении собираются использовать onSessout который отличается от onpress Отказ onSessout называется всякий раз, когда прикосновение выпущено пользователем (когда пользователь останавливается нажатием кнопки). Это называется до onpress И более точнее в ситуации, как наша, где нам нужно начать или остановить таймер, нажав кнопку, как только выполняется пользователь.
Теперь мы потребуем этого Кнопка Компонент в нашем компоненте таймера.
Интеграция redux?
До сих пор наше приложение таймера не делает ничего, кроме отображения минимального пользовательского интерфейса. Чтобы он работал, мы начинаем с добавления некоторых необходимых зависимостей Redux.
Теперь начнем интегрировать redux в нашем приложении.
Действия?
В Redux состояние всего приложения представлено одним объектом JavaScript. Подумайте об этом объекте как только для чтения, поскольку мы не можем внести изменения в это состояние (которое представлено в форме дерева) напрямую. Нам нужно Действия сделать это.
Действия похожи на события в redux. Они могут быть вызваны в виде щелчков мыши, ключевых прессов, таймеров или сетевых запросов. Природа каждого упомянутой события является смешной. Действие – это объект JavaScript. Чтобы определить действие, есть одно требование: каждое действие много имеет свой собственность собственного типа. Мы определяем эти типы в файле под названием Типы.js :
Наше приложение нужно только три действия. Тип любого действия представляет собой строковое значение и определяется как постоянная.
В файле Actions.js Мы потребуем эти типы, чтобы определить создателей действий. Создатели действий являются функциями, которые создают действия.
Редукторы?
Приемник действия известен как редуктор. Всякий раз, когда действие вызвано действие, состояние применения изменяется. Обработка состояния приложения осуществляется редукторами.
Редуктор – это чистая функция, которая рассчитывает следующее состояние на основе начального или предыдущего состояния. Это всегда производит тот же выход, если состояние неизменяется. Требуется два входа, а состояние и действие должно возвращать состояние по умолчанию.
В нашем исходном состоянии мы определяем три атрибута: isplaying , ElapsedteTime и таймер поферы Отказ Таймер в настоящее время имеет значение по умолчанию 6 (секунд) для целей тестирования, но фактическое значение, которое мы собираемся изменить позже, это 25 (или 1500 секунд).
Тогда есть три функции помощника:
ApplyStartTimerначнется таймерApplyRestartTimerостановит функцию таймера и установить все значение по умолчанию- И, наконец,
ApplyAddsecondПроверим, пройдено ли время в течение всего времени длительностью общего таймера. Если это так, это добавит еще одну секунду, чтобы увеличить его значение. Если нет, он вернет состояние по умолчанию и остановить функцию таймера от работы.
После этого мы определяем нашу функцию редуктора и экспортируйте ту же функцию. Соблюдайте, как организована функция редуктора. Это шаблон, за которым следует большинство членов сообщества, я видел в Интернете.
Это это хороший ресурс для начала работы с redux в целом Дэн Абрамов И это бесплатно!
Создание магазина redux?
С помощью редуктора и исходного состояния мы можем создать объект магазина.
Магазин – это объект, который приносит и действия и редукторы вместе. Он обеспечивает и удерживает состояние на уровне приложения вместо отдельных компонентов. Redux не является самоуверенной библиотекой с точки зрения того, какие рамки или библиотеки должны использовать его или нет.
Чтобы связать реакцию или реагировать собственное приложение с redux, вы делаете это с React-redux модуль. Это делается с использованием высококачественного компонента Провайдер Отказ Он в основном передает магазин до остальной части приложения.
Нам нужно связать создатели Действия с помощью функции нашего таймера, чтобы сделать его полностью функциональным (так, чтобы она ответила на трогать события или запуск или перезапуск таймера). Мы сделаем это в Таймер/index.js функция.
Во-первых, мы импортируем необходимые зависимости для привязки Action Creators.
BindocationCreators Карты действий функций для объекта с использованием имен функций действия. Эти функции автоматически отправляют действие в хранилище, когда вызывается функция. Чтобы изменить данные, нам нужно отправить действие. Чтобы включить это, нам нужны две вещи: MapstatetoProps и mapdispatchtopops И нам нужно подключить их обоих с нашим компонентом. Это код BoverPlate, который вы будете снова написать.
Мы определяем эти две функции и изменим нашу Экспорт по умолчанию Заявление После того, как мы определим стили для наших реактивных родных взглядов.
MapstatetoProps это объект, который живет в магазине, ключевые ключи передаются к компоненту в качестве реквизита. Ниже приведен полный код для компонента таймера.
Заполнение приложения ⚛️ +?
Я создал пользовательскую функцию под названием Форматтиме Чтобы отобразить время в правильном формате, но вы можете использовать любой библиотеку таймера. Далее, чтобы увеличить значение времени, я использую метод жизненного цикла RACTECYCLE ComponentWillReceiveProps Отказ Я знаю, что это скоро устарело, но на данный момент это работает. Смотрите наше мини-приложение в действии ниже:
Ради краткости и этой демонстрации я использую только секунды для отображения таймера. Вы можете увеличить значение таймера, редактировав значение постоянного Timer_duration . в Редукторы.js Отказ
Мы достигли конца статьи. Надеюсь, у вас было столько весело читать это, как я написал это. Вы можете найти полный код для этой статьи на этом репо GitHub:
Amandeepmittal/RN-Pomodoro пример RN-Pomodoro-пример – реагировать на родной + redux aidegartation github.com.
Вы помните, что я рассказываю вам о конкретной структуре файлов, который я выполнил в реализации архитектуры Redux? Ну, это называется повторно утки шаблон, и вы можете найти более подробную информацию в этой информативной статье Алекс Молдован :
Масштабирование вашего приложения redux с утками Как ваша фасоль приложений в интерфейс? Как вы убедитесь, что код, который вы пишете, достаточно пригодны 6 месяцев … Medium.freecodeCamp.org.
? Для получения дополнительной информации свяжитесь со мной на Твиттер или читать больше обо мне у меня Веб-сайт .
Если вы хотите получить обновления в моей следующей статье на agean rate, пожалуйста, рассмотрите возможность регистрации для моей рассылки.