Когда вы впервые встречаетесь с Redux, сначала это часто кажется немного подавляющим. Однако, если вы хотите эффективно работать с redux, вы должны понимать, как он работает и каковы его основные элементы. Состояние ... Действия ... Редукторы ... Хранить ... В сегодняшнем посте я хотел бы познакомить вас с Redux не столь технически сложным способом, чтобы вы поняли, как он работает.

Что такое Redux?

Если вы совершенно не знакомы с Redux, то вы можете сначала проверить Redux docs.

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

Имейте в виду, что вам не нужно быть веб-разработчиком, чтобы использовать в своем приложении архитектуру, подобную Redux. Существует множество реализаций такой идеи для разных платформ, и ReSwift - одна из них.

Архивы (Государственные)

Если бы я спросил вас, как выглядит состояние в вашем приложении, было бы очень сложно сразу это объяснить. Некоторые значения хранятся в моделях представления, есть несколько репозиториев, в которых также хранятся некоторые значения… О! И этот класс прямо там, который знает, какой пользователь в настоящее время вошел в систему. Но что, если после такого вопроса мы могли бы сразу представить состояние нашего приложения? Не было бы проще рассуждать о приложении, заказанном таким образом? В этом случае Redux предлагает решение для нас. Представьте, что ваше состояние похоже на архив, вы точно знаете, где искать, и оно хранится в единой структуре. Конечно, наличие большой конструкции не означает, что это будет беспорядок. Вы можете сохранить свое состояние в ящиках архивов, которые будут отображать состояние вашего экрана входа в систему, экрана настроек и т. Д.

Письма (Действия)

Итак ... теперь у нас есть аккуратно структурированное состояние в наших архивах, все чисто, и о нем легко рассуждать. Но, как и следовало ожидать, высока вероятность того, что наши пользователи захотят каким-то образом изменить это состояние (я думаю, в этом нет ничего нового). Как мы с этим справимся? Что ж, мы не можем напрямую получить доступ к состоянию нашего приложения и изменить то, что мы хотим. С чистыми архивами так работать не надо… Представим, я хочу сменить адрес. Я не могу просто зайти в мэрию и поиграть с их архивами. Мне нужно написать официальный letter.

Title: John Doe - Address Change Hello, I've just moved to another house. My current address is Art Street 10.

Не волнуйтесь, когда мы меняем состояние в нашем приложении, нам нужна только важная информация. Это может выглядеть так:

Это письмо может быть отправлено в тот момент, когда пользователь нажимает кнопку, а поля могут быть заполнены из формы, которую пользователь только что заполнил.

Бухгалтеры (создатели действий)

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

Ратуша (Магазин)

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

Рабочий мэрии (редукторы)

Как я уже сказал, в мэрии много людей, которые занимаются разными вещами. Это редукторы в нашем приложении. Представим, что после получения нашего письма оно передается в cityHallDirector, который вручает его каждому работнику в этой ратуше. Некоторые из них посмотрят на него и просто проигнорируют, так как видят, что это название им не знакомо. Но в какой-то момент появится человек, который скажет: «О! Я отвечаю за смену адреса, я должен с этим справиться! »

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

Итак, это основные элементы архитектуры Redux. Архивы - состояние в нашем приложении Отправка писем - отправка действий с полезной нагрузкой, которые вызовут изменение состояния. Бухгалтеры - создатели действий Мэрия - Магазин приложений, который содержит текущее состояние и редукторы, которые создадут новое состояние. Работники мэрии - редукторы, которые знают, как создать новое состояние, используя текущее состояние и действие.

Я надеюсь, что это поможет некоторым новичкам понять, как работает redux и каковы обязанности его элементов.

Элиаш Савицкий

Инженер-программист @ Bright Inventions

Личный блог Электронная почта Github

Redux - Как я понимаю? был опубликован 19 апреля 2017 года.

Первоначально опубликовано на brightinventions.pl.