Автор оригинала: Eduardo Vedes.
Привет все ❤️.
Некоторое время теперь я слышал моих друзей и коллег, жалующихся на то, насколько усердно попадают в Redux.
Я запускаю группу исследовательской группы FreeCodeCamp на юге Португалии, Фару, поэтому каждую неделю я пытаюсь мотивировать и наставлять некоторые коллегиры, которые имеют много растущих болей, пытаясь пройти свой путь в программирование.
Дэн Абрамов создал удивительное введение курса для Redux, который мне приятно видеть в EGGHEAD.IO , прикрывая все аспекты redux. Также сайт документации Redux, здесь , очень полный.
Но по какой-то причине многие люди до сих пор не Grok Redux.
Дело в том, что Redux имеет значительную кривую обучения на начало уровнях!
Вы должны понимать много абстракций, вы должны сделать более функциональный подход к программированию в JavaScript, знаете много функций ES6, а также очень хорошо понимают много концепций JavaScript, таких как неизменность.
Итак, именно поэтому для тех из вас могут быть очень трудные, которые вы начали реагировать в несколько месяцев назад и очень восторжены абстрагируют ваше государство в магазин Redux.
Вы слышите Chit-Chat вокруг кофемашины того, как redux проводится его, о чистом программировании, одноисточниках истины и три принципа, которые управляют этой огромной «крошечной библиотекой» (2 КБ) …
Итак, никаких забот, вы пришли в нужное место! Эта статья для вас! И я покажу вам приложение первым принципом подходом, насколько легко заставить мяч прокатиться с redux.
Многие чернила уже пролились вокруг этой темы, но пойдем. Позвольте мне попробовать представить вас как можно быстрее, насколько я могу к мистеру redux в контексте реагирования.
Чтобы начать с этого Hercolean Task, я собираюсь показать вам, как сделать очень простой счетчик счетчиков со следующей пользовательской историей:
- отобразить текущий номер подсчета;
- Укажите пользователю двумя кнопками, для увеличения и уменьшения числа подсчета.
Хорошо, на данный момент вы думаете: я мог бы сделать это очень быстро с местным государством.
Правдивая история! И это путь, приятель! Мы собираемся начать с простого реактуального примера, который использует локальное состояние, и мы собираемся преобразовать приложение в приложение red-redux.
Но, до этого, позвольте мне представить вам основные концепции и цели Redux в быстром вступлении.
01. Базовые концепты
Redux был создан Дэн Абрамов И он определяется как «предсказуемый государственный контейнер для приложений JavaScript».
Мотивация Дан создавать Redux состояла в том, что СПА сложность много увеличивается. И мы остались одни, чтобы управлять состоянием наших данных с двумя сложными концепциями для человеческого разума к разуму о: Мутация и асинхроничность Отказ Он называет их « Mentos и Coke – Оба могут быть велики в разделении, но вместе они создают беспорядок».
Таким образом, Redux предлагает описать все состояние вашего приложения в виде простого объекта. Чтобы изменить что-то в состоянии, вы должны отправить действия. Действия являются простой объектами JavaScript, которые описывают, что случилось с вашим приложением.
В конце концов, чтобы связать действия и состояние вместе, мы пишем функцию, называемую редуктором. Редуктор – это просто функция JavaScript, которая принимает состояние и действие в качестве аргументов и возвращает следующее состояние приложения.
Три принципа redux:
- Один источник правды: состояние всего вашего приложения хранится в дереве объекта в течение одного хранить .
- Государство только для чтения. Это означает, что единственный способ изменить состояние – выделять действие (объект, описывающий то, что случилось).
- Изменения сделаны с Чистые функции Отказ Чистые функции являются функциями, которые возвращают значение только в зависимости от значения его аргументов. У них нет наблюдательно побочных эффектов. Когда вы вызываете одну и ту же функцию с тем же аргументом, вы всегда получаете то же возвращаемое значение. Чистые функции также не изменяют аргументы, которые они получают. На самом деле они возвращают новый объект, массив или функцию с внесенными на него изменениями.
02. Приложение Counter (реагируйте с локальным состоянием, нет redux здесь)
Хорошо, друзья, возвращаясь к тому, откуда мы исходили, давайте сделаем наше небольшое приложение только с местным государством.
Чтобы начать эти котельные устройства, я всегда использую приложение Create-React-App (CRA) с Bootstrap (просто чтобы получить все простое, но немного более понравилось).
Я сохранил SRC/index.js, который вызывает компонент
Если вы хотите играть с кодом, вы можете клонировать его из моего GitHub Repo здесь (Имейте в виду, что это на филиале LocalStateapp).
Итак, давайте посмотрим на то, что нам нужно создать наше простое приложение.
Так же просто, как это не в коробке.
Я начинаю свой компонент приложения инициализацию состояния с переменной подсчета, которая по умолчанию устанавливается на ноль.
Я построил очень простой метод рендера, который разрушает количество от состояния и показывает какой-то текст. Он также вызывает счетчик счетчиков, передавающую значение счетчика в него, и вызывает небольшой метод под названием RenderButtons () для отображения кнопок приращения/уменьшения.
Кнопки вызывают метод, называемый UpdateCounter () и передать в него тип обновления, который мы хотим.
Здесь мы уже строим наш путь в redux. Одна деталь действий в Redux заключается в том, что, помимо простых объектов, которые зависит от вас, они должны иметь свойство типа, которое не является неопределенным. (Просто держите это в виду сейчас.)
Так что здесь у нас есть наш метод UpdateCounter, который очень похож на то, что редуктор находится в Redux. Он получает текущее состояние приложения, оно получает действие, и в конце концов он возвращает новое состояние вашего приложения.
Никакая магия вообще! Redux настолько естественный и легко, чтобы вы не почувствовали разницу вообще, так как вы знаете две или три маленьких деталя, которые заставляют вещи казаться очень сложными и трудно GROK.
Это окончательный результат нашего приложения:
03. Приложение Counter (с/redux State)
Хорошо, друзья! Давайте сломаемся до сих пор до сих пор.
Чтобы установить Redux, вы должны сделать:
NPM установить –save redux read-redux
Поэтому после установки Redux Package.JSON зависимостей должен выглядеть так?
Что теперь?
Давайте сломаем наше приложение! Но не слишком много! ?
Таким образом, мой первый шаг будет удалять состояние из компонента приложения и создать магазин redux на index.js:
Что мы здесь сделали? ☕. ️
Мы отредактировали наш основной файл index.js, чтобы создать магазин redux и пропустите его как опоры в наше компонент
Вы можете заметить два импорта по вершине: провайдера и Createstore.
Вы также должны заметить использование HOC
Но ждать!
Что такое редуктор в этом определении переменной?
О, мы скучаем по редуктору!
Таким образом, в магазине необходимо получить хотя бы одну функцию редуктора, чтобы на самом деле знать, как работает изменения в состоянии.
Давай сделаем это!
В нашем старом приложении мы имели этот метод UpdateCounter, который мы говорили, было своего рода редуктором.
Итак, давайте переместим его на index.js (вы также можете извлечь его в другой файл и импортировать его, но давайте будем держать вещи на данный момент).
Таким образом, мы извлекли метод UpdateCounter из нашего компонента приложения, и мы немного настроили его, чтобы дать ему еще несколько контекстов.
Мы назвали это редуктором. Это редуктор, который мы хотим перейти в метод Createstore.
Мы также добавили состояние в качестве аргумента, потому что когда мы извлекли его в контексте компонента
Мы использовали функции ES6 для определения инициата по умолчанию, если состояние не определено. Помните, что я сказал вам выше?, Что государство не могло быть неопределенным. Это один из условий редуктора Redux.
Кроме того, ничего нового всех! Угадай, что? У нас есть наш редуктор и готов сделать свою работу!
Теперь давайте обратим внимание на действия!
В нашем старом приложении они были вызовы UpdateCounter. Но теперь, когда вы помните, что нам нужно использовать метод Dispatch () от Redux для отправки действий, поэтому нам нужно добавить этот слой API в наше приложение.
Мы настраивали только две вещи, которые люди! У нас есть метод отправки, разрушив его от реквизитов. Помните
Вместо того, чтобы звонить this.updateCounter, мы сейчас называем отдельной функцией UpdataTateCounter, предоставляющей ему тип действия (как мы уже были в старом приложении).
Давайте теперь посмотрим, что новая функция UpdateCounter:
Хорошо, ничего нового, мы просто получим метод отправки и вернуть его с типом действия, которые мы хотим выстрелить.
В это время мы уже создали магазин. Мы создали редуктор, чтобы захватить предыдущее состояние приложения и действие и возвращать новое состояние. Мы создали функцию действия для отправки наших приложений.
Что еще? Это должно работать сейчас! Почему это не так?
ОХО! Наш компонент приложения должен быть подключен к Redux!
Так что это наш последний шаг каждый! ?
Начнем, импортируя метод Connect из React-redux (в наш файл app.js).
Теперь в конце нашего файла, где мы выполняем приложение экспорта нашего компонента по умолчанию, нам нужно сделать соединение:
Хорошо! Помните, что мы удалили локальное состояние из нашего компонента приложений?
Итак … Как мы впрыскиваем состояние магазина в наш компонент?
Нам нужно сделать «MapStatetoPOOP»! Привыкайте к этому, потому что он всегда будет необходим. Компонент приложений получит новое состояние как опоры. У вас нет этого. Больше !!
MapStateToPOPS захватывает состояние из метода Connect (HOC) и связывает его к компоненту приложения.
И это все все! К этому времени ваше приложение должно быть запущено.
Не стесняйтесь взглянуть на код в моем Github Repo (филиал reduxstateapp) здесь Отказ
Конечно, после этого много вещей, но это главный первый шаг для вас, чтобы понять, как заставить мяч прокатиться с Redux.
Теперь я прошу вас сделать домашнее задание: посмотрите два приложения! Убедитесь, что вы Grok все шаги и сравните их. Поставить много console.log Чтобы понять, что происходит, и, прежде всего, принимают, что в redux есть API, который имеет несколько, но строгие правила. Не все так логично для начального уровня, как ожидается! Но это только хорошие боли для JavaScript!
Всегда не забывайте быть сильным и кодом на каждом ❤️
И держать вашу боль в чеке с хорошим и горячим ☕️ ️
04. Библиография
01. Docs redux.
02. EGGHEAD.IO Дэн Абрамовский курс на Начало работы с redux
Оригинал: “https://www.freecodecamp.org/news/redux-get-the-ball-rolling-in-10min-9d9551ff4b3c/”