Когда я впервые изучал React, я был ошеломлен его множеством уникальных функций и расширений. Это был один из самых сложных переходов между фазами во время моего обучения в школе Flatiron. Несмотря на это, я смог освоиться с фреймворком и расширить свой набор навыков, включив в него множество полезных инструментов, включая Redux.
Почему Redux?
Одна из основных причин, по которой так много людей используют redux, заключается в том, что он использует более простое и оптимизированное управление состоянием для сложных или густонаселенных иерархий компонентов. Redux также упрощает разделение задач в вашем приложении - его единственная задача - обрабатывать глобальное состояние.
При управлении состоянием в большом приложении с множеством компонентов может возникнуть довольно большой беспорядок, когда состояние одного компонента должно быть обновлено вторым компонентом. Традиционно новое значение будет передаваться до самого верха иерархии компонентов через каждый компонент выше его источника, а затем снова передается следующему компоненту для обновления его состояния.
В Redux состояние хранится глобально и может быть легко обновлено или вызвано из любой точки приложения.
Это сравнимо с поездкой на местном автобусе по сравнению с поездкой на такси Uber. Местный автобус обычно идет только в одном направлении и делает много остановок, чтобы добраться до конечного пункта назначения. Он также отправляется только из заранее определенных мест, и если автобус не останавливается в нужном месте, вам придется пересесть на другой автобус. Кроме того, Uber может забрать вас из любого места и всегда доставит в нужное место. Конечно, автобус дешевле, выполняет свою работу, и вам не нужно настраивать весь профиль или вводить данные кредитной карты, но uber всегда пригодится, когда с автобусом все становится слишком сложно.
Файловая структура
Когда я изучал redux, меня учили разделять действия и редукторы по файлам. Это следует за темой Redux о разделении ответственности, а также делает код более читабельным и менее загроможденным.
Index.js
В верхней части файла Index.js createStore applyMiddleware и rootReducer импортируются из библиотеки redux, Provider импортируется из библиотеки response-redux, а преобразователь импортируется из библиотеки redux-thunk.
CreateStore используется для создания магазина приложения с использованием корневого редуктора, который будет содержать дерево состояний приложения. ApplyMiddleware используется для применения промежуточного программного обеспечения redux-thunk к хранилищу. Провайдеру передается хранилище в виде реквизита, что делает состояние доступным для всех компонентов, заключенных внутри.
Файл типов действий
Файл типов действий содержит переменные, используемые для распознавания действий в файле действий. Хотя этот файл не является необходимым для работы Redux, он способствует разделению проблем и помогает избежать опечаток и других мелких ошибок.
В моем приложении Pocket Dudes я решил использовать Redux для обработки состояния питомца. В файле типов действий две переменные, GET_PETS и ADD_PET, устанавливаются на свои имена в кавычках и экспортируются.
Файл действий
Файл действий содержит функции redux, которые возвращают данные (отправка), передаваемые в redux. Обычно эти функции принимают фрагмент данных и затем отправляют его и тип действия корневому редуктору.
Сначала оба типа действий импортируются из файла типов действий. Первая функция, addPet, принимает объект домашнего животного и отправляет почтовый запрос в базу данных. Затем, после завершения почтового запроса, данные отправляются корневому редуктору с ключом полезной нагрузки и типом действия ADD_PET. Вторая функция, getPets, принимает объект пользователя, устанавливает полезные данные для домашних животных пользователя и отправляет их корневому редуктору с типом действия GET_PETS.
Файл корневого редуктора
Файл корневого редуктора содержит текущее состояние и «функции редуктора», которые обрабатывают состояние обновления.
В файле Root Reducer combReducers импортируется из библиотеки redux и позже используется для поддержания текущего состояния и его обновления.
Затем в качестве состояния по умолчанию устанавливается хэш с ключом «pets» и значением пустого массива. Функция petsReducer принимает состояние по умолчанию, а действие определяет тип действия, и обновляет состояние с помощью полезная нагрузка (независимо от того, какие данные мы установили для ключа полезной нагрузки в файле действий).
Корневой редуктор устанавливает текущее состояние «pets» на то, что в данный момент возвращает petsReducer. Если действие не вызывается, petsReducer возвращает текущее состояние.
Отправка карты в реквизит
Функция map dispatch to props (mdp) делает определенные действия redux доступными через свойства компонента.
Здесь я использовал функцию getPets для получения всех домашних животных пользователя в компоненте PetCard и функцию addPet для добавления домашнего животного в список домашних животных пользователя в компоненте AdoptPet. Функция connect импортируется в верхнюю часть файла из библиотеки Redux и используется для подключения ответа диспетчеризации от функции при вызове к корневому редуктору.
Сопоставить состояние с реквизитом
Функция Map State to Props (msp) делает определенные объекты состояния доступными через свойства компонента.
В файле App.js функция msp принимает текущее состояние redux (через функцию подключения) и возвращает значение для указанного ключа состояния.
Заключение
Redux - очень абстрактная библиотека, и для ее полного понимания требуется много изучения и практики. Хотя мое понимание все еще довольно свежо, и я, возможно, не стал вдаваться в подробности в своих объяснениях, я планирую продолжать практиковать и изучать Redux и, надеюсь, вернусь, чтобы отредактировать этот блог с более подробными иллюстрациями.
