Boilerplate — Redux — React Native — Урок 5 — Level 2

Автор Ruslana Chernenko
Boilerplate — Redux — React Native — Урок 5 — Level 2

Hello world с вами декоративные и тема сегодняшнего урока и также бойлерплейт.

Сегодня мы научимся с вами создавать стандартные бойлерплейт шаблон для проектов redax поэтому усаживайтесь поудобнее поехали мы находимся в корне проекта, что нам нужно сделать нам нужно создать папку actions. Как вы помните из нашего урока actions — это действие пользователя которую мы делаем вилы для тех кто забыл напоминает и картинкой создаем которая называется у нас серч. Энджин то есть любые изменения в поиске будут передаваться у нас в эту функцию которая будет возвращать тип помним из концепции порядок которому проходили — это наш Action и привод необязательное поле.

Но в данном случае вам понадобится мы.

Передаем текст следующее, что нам нужно сделать — это отключить функцию Connect функция Connect из библиотеки redax на вход принимает две функции — это mapstate To props и State to dispatch соответственно. Но чуть позже мы с ними познакомиться для начала повторяем за мной и дальше будет вам более понятий. Пока мы в качестве второго аргумента мы укажем наши функцию свитшот дальше. Мы импортируем наш Action нашла функцию сердце из папки actions охраняю. Так, что мы видим у нас смотрите ошибка. Нам говорят, что нам нужен компонент провайдеры вообще нужен нам в сторону нужно создать на шестом то место где будет хранится наша наша база наша дата наше состояние приложение для этого мы создаем. ФГС в корне импортируемого и создаем его с нуля первое что. Разумеется подключаем react дальше мы импортируем провайдер. ТТК провайдер из реакт редакс — это wrapper обёртка которая позволяет нам сделать доступными наш свойства и функции. Так нам нужно установить библиотеку редакция devtools extension. Это для пользователей Mac для Windows и поставить не нужен потому, что ну вас на работу не будет. Поэтому добавить вам придётся через браузер. Но — это отдельная настройка. Я думаю в интернет вы найдете дальше вам нужно импортировать крестор и. Пламени друга из библиотеки рядом. Мы импортируем редакция. НК об этом мы поговорим в следующем уроке, а в этой библиотеке, но подключим уже и в этом следующее, что нам нужно импортировать папку из редиски опять же для наглядности покажу вам эту картинку пациент — это наш мусор и — это папа включает в себя в том числе и состояние стороны. Поэтому создаём её не понимаем, что у нас где находится. Благодаря этой картинке импортировали теперь создаем папку Resort и вход через. Яндекс Какой пароль у нас. Интерфейс — это файл входа везде каждой пачке. И хорошая практика использовать это. Как ваша карта так импортируют наш компонент скрин из-за рс-31 создаем Storm следующим образом то есть наш createstore — это функция которая находит принимает редуктор компас виртуоз. И куда мы встали бульвару инокспоинт для пользователя Windows чуть позже покажу дальше создаем мы Proper наш провайдер куда мы. Передаем Storm и заворачивать понять скрин. Ну импортируем наш компонент наружу и устанавливаем зависимость библиотеку пункт так вот собственно говоря цитаты для пользователя Windows вас по-другому потому, что redux-devtools-extension с у вас работать не будет только так мы видим, что у нас показывается, что обязательно нужен редуктор функциям его собственным моё создаем функцию комбайн Reader эта функция которая позволяет нам объединяет редис рыбы дальше импортируем. Наш первый резистор ученых можно многое импортировать сюда и комбайн reducers позволяет нам. Экселе объединять всё очень просто создаем. Наш первый редуктор сервер называется ну и создаём комбайн регистр функцию экспортируемые о него сердце редюсер всё по аналогии дальше создаем samregion.ru — это у нас функция которая на вход принимается два аргумента стоит на. Шторм наше состояние приложения и мешал стоит чуть попозже экшены которые будут определять в соответствии исходя из того какие будут наши конструкция Switch кейс из ванильного. С которой будет обрабатывать условия то есть у нас 1 штук в одном условии если Action Toy будет другой подругой. Но у нас пока Action Type 1 SH change который будет прихода мы будем возвращать начальное состояние стоит мув название фильма и Action payload, что будет прилетать мы будем вкладывать в наш стоит мы будем возвращать наш стоит теперь создаем наш сайт состояние. Наше приложение называемую не. Шустрый и называем создаем свойствам дальше, что нам нужно нужно нам импортировать кип-сервис change — это строка который мы сейчас создаем. Поли определён types — это файл будет легче для редукторов 1 для удобства чтобы нам не заниматься дальше, что мы делаем Export const и равно R change строка всё создали константу мы её здесь импортировали и то же самое делаем мы заменяем соответственно всё сохраняем всё должно работать. Так проверяю, что у нас переходим в наш компания Screen 1 и посмотрим, что у нас в пробках лежит без спросу вызываем посмотрим вот на свете даст сердце что-нибудь функция отличие теперь в эту функцию серч нам нужно отправить наше текстовое поле, но для начала мы проверим, что он срабатывает вот на свете называется в консоли Hello всё отлично. Теперь мы этот Hello любое другое слово будем отправлять функцию которая доступна падает спрос сердце текст туда отправили на всякий случай проверяем консоль. Лог текст всё сохраняем смотрим доходит — это наше функции нашла. Вот всё ведь и приходят всё отлично. так давайте посмотрим как наш срабатывает редюсер потому, что мы уже подключили и, что мы видим. Так здесь у нас в консоли всё работает и смотрите у нас нашим Store нашем столетии мы видим Action и payload набираем видите всё видно отрабатывается отлично такой devtools есть для поезда.

0 комментариев
0

Читайте также