Добро пожаловать назад! А вот и первая глава

Мы перестали реализовывать заголовок, но пропустили стили. Как мы их реализуем? Как вы помните из нашей предыдущей главы, мы можем импортировать опору StyleSheet из ‘react-native’. Это дает нам возможность стилизовать наши элементы. Таблица стилей - это объект, содержащий create() method. Мы передаем объект, являющийся нашими стилями, методу create() method.

Вот реализация. Сначала мы импортируем таблицу стилей. Во-вторых, мы определяем наши стили с помощью StyleSheet.create() и передаем наш объект стиля как аргумент n. В-третьих, мы деконструируем наши реквизиты из переменной стилей. И наконец, мы размещаем свойства стиля к нашим элементам через свойство style. Надеюсь, это имеет смысл. Убедитесь, что вы понимаете упомянутые концепции - обязательно прочтите и усвоите предоставленные мной ссылки (подчеркнутый текст). 😊

Получение данных из API с помощью Redux.

это должно быть знакомо. Настройка Redux с помощью RN - это тот же процесс, что и настройка с помощью React. Попробуйте сначала сделать это в одиночку, так вы узнаете больше! Вот руководство по Redux. Ты можешь это сделать!

Готовы?

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

$ npm i --save redux react-redux redux-thunk redux-promise && npm i --save-dev remote-redux-devtools remotedev-rn-debugger remote-redux-devtools redux-logger

Описание инструментов:

  • redux - Библиотека Redux.
  • react-redux - клей для React и Redux.
  • remote-redux-devtool remotedev-rn-debugger

Это промежуточное ПО для отладки Redux, которое позволяет нам использовать Redux Chrome Devtools в удаленном режиме.

NB: убедитесь, что вы скачали это расширение для Chrome !!

  • redux-thunk - преобразователь Redux позволяет нам возвращать функцию внутри действия вместо возврата объекта.

  • redux-logger - записывает в консоль предыдущее состояние, действие и следующее состояние.

Примечание. регистратор должен быть последним промежуточным программным обеспечением в цепочке, иначе он будет регистрировать переходы и обещания, а не фактические действия (# 20).

  • redux-promise - позволяет нам разрешать асинхронные действия (обещания) с Redux. Пример: получение данных из API.

Надеюсь, у вас достаточно кофеина - мы начнем экспериментировать с нашим магазином.

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

Создайте src/Store.js и добавьте следующее содержимое.

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

Начиная сверху.

  • импортировать Platform из ‘react-native’

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

Нам нужно Platform для наших инструментов удаленной разработки.

  • createStore() необходим для создания нашего начального магазина. Передаем этот магазин в <Provider>

createStore() принимает следующие аргументы:

  • редуктор
  • предварительно загруженное состояние
  • усилитель
  • applyMiddleware() - Предназначен для применения ... как вы уже догадались ... промежуточного программного обеспечения. Помните, что мы используем thunk действия, promise и logger.
  • compose() - Составляет функции справа налево.

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

Мы передаем промежуточное ПО и devTools в качестве аргументов для функции compose.

  • импортировать наш RootReducer и передать его в качестве первого аргумента функции createStore().
  • Наконец, мы открываем наш магазин внешнему миру.

Быть ошеломленным - это совершенно естественно - на самом деле, если вы не ошеломлены, поздравляю вас с тем, что вы вундеркинд. Найдите время, чтобы прочитать это пару раз.

Справка: Подойдите сюда, если он просто не щелкает.

Добавление провайдера

Вернитесь к App.js и импортируйте наши Store.js и Provider из ‘react-redux’

Provider принимает один аргумент - это наш магазин. Задача Provider - склеить React и Redux вместе.

Заключительные шаги с инструментами

Наш последний шаг в создании инструментов - добавить пару скриптов в package.json

  • Добавьте эту строку в scripts

“postinstall”: “remotedev-debugger — hostname localhost — port 5678 — injectserver”

  • Добавьте новый объект с именем “remotedev” с этими двумя реквизитами:
"remotedev": {
  "hostname": "localhost",
  "port": 5678
},

Создание нашего RootReducer

$ mkdir src/Reducers && cd src/Reducers && touch index.js && touch CryptoReducer.js

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

Создайте наш криптоконтейнер и сопоставьте его с состоянием redux.

touch src/components/CryptoContainer.js

Мы используем метод connect для подключения компонентов React к состоянию Redux.
connect() принимает два аргумента.

  • Первый аргумент - это mapStateToProps. Делает именно то, что называется после. Сопоставляет состояние Redux с нашими реквизитами React. Мы можем получить доступ к состоянию crypto в this.props.crypto
  • Второй аргумент - mapDispatchToAction. Мы вернемся к этому в следующей главе.

Сделайте Header.js и CryptoContainer экспортируемыми в src/components/index.js - вот так

Наконец, давайте добавим компонент CryptoContainer.js к App.js следующим образом:

Время проверить!

Запустите наш симулятор iOS / Android.

Вот что вы должны увидеть:

Хорошо. Так как же нам отлаживать? Отличный вопрос! Нажмите эти клавиши:

Mac: cmd + d.

Windows: Ctrl + M.

Это открывает возможности для нашего собственного приложения React.

Нажмите Отладка удаленного JS. Откроется браузер в режиме отладки.

Работает безупречно. Как видно из нашего Redux Devtools, отображается состояние crypto (пустой массив).

Вау, это было много кода котла и настройки. Гарантирую, оно того стоит. Redux - это круто.

В этой главе рассказывалось обо всех инструментах и ​​настройке. В следующей главе мы реализуем фактическую выборку данных и напишем некоторый «непсевдокод».

Спасибо, что зашли так далеко, вы классно! 😊

Продолжайте здесь!



Давайте создадим: мобильное приложение с собственной криптовалютой и React Native + Redux - Глава III
Снова добро пожаловать в разработку собственных приложений с помощью React Native и Redux, как босс! Рад видеть тебя здесь! ❤ medium.com



Если вы хотите вывести свой JavaScript на новый уровень, начните с этой книги, найдите версию kindle здесь.

Исходный код на случай, если вы заблудились!