Close
Но Redux намного лучше с ES2015, поэтому с этого момента он будет активно использоваться в примерах в статье. Не беспокойтесь, при использовании новых возможностей, я буду объяснять их действие. Хранилище можно рассматривать как посредника для всех изменений состояния в приложении. При использовании Redux компоненты не общаются между собой, все изменения состояния передаются через единственный источник истины — хранилище. В составе библиотеки redux.js есть функция создания хранилища createStore. Используем её для создания хранилища и подключим к нему несколько представлений, которые создадим такой функцией.
Каждый селектор создается с помощью функции createSelector() из Reselect, поэтому может мемоизировать вычисления результатов. PayloadCreator() может использовать AbortSignal, переданный через thunkAPI.sign https://deveducation.com/blog/chto-takoe-redux-i-zachem-on-nuzhen/ для отмены “дорогостоящих” асинхронных операций. Такие редукторы также передаются в createReducer() и могут безопасно “мутировать” их состояние.
Будем считать, что остальные части приложения меняют свое поведение в зависимости от того, какой пункт списка выбран. Генераторы действий (actions creators) — это функции, создающие действия. Состояние хранилища будет представлять тип Immutable.Map, который представляет собой словарь, хранящий пары ключ-значение. В качестве ключей здесь используются названия свойств объекта.
Вы, возможно, сможете даже представить, как это будет выглядеть в рамках вашего подхода. Но в конечном итоге после этих примеров мне придется объяснять, что у нас есть лучший вариант и о ручной привязке надо забыть. Итак, представляю официальный модуль React/Redux для связывания — react-redux.
Как правило, это реализуется посредством создания коллекции объектов с id в качестве ключей и отсортированного массива этих ключей. Многие Redux-приложения структурируются по принципу “директория-тип”. В такой структуре преобразователи, обычно, определяются в файле “actions”, отдельно от обычных создателей.
Правильно ли использовать в таком случае использовать Redux для хранения остатков по счетам? Функции useSelector и useDispatch могут выполнять свою роль, только если мы правильно присоединим React-приложение к хранилищу store нашего Redux. Реализуем в React ту же функциональность, что и в предыдущем разделе. В этом разделе соберём небольшое приложение, чтобы посмотреть на то, как части Redux взаимодействуют между собой.
Для обновления состояния применяются методы класса Immutable.Map. Каждый такой метод возвращает новый объект Immutable.Map. Она принимает тип операции и возвращает создателя операции для этого типа. Создатель может вызываться без аргументов или с аргументом payload, добавляемым к операции. Кроме того, создатель перезаписывает метод toString(), поэтому тип операции становится его строковым представлением.
Благодаря использованию библиотеки immer, она позволяет напрямую “мутировать” состояние. Также она поддерживает преобразование типов операции в соответствующие редукторы, которые обновляют состояние при отправке этих типов. Redux рекомендует использовать “создателей операции” для инкапсуляции процесса создания объектов операции. Функция createReducer() похожа на функцию создания поисковой таблицы из документации по Redux. В ней используется библиотека immer, что позволяет писать “мутирующий” код, обновляющий состояние иммутабельно. Это защищает от непреднамеренного мутирования состояния в редукторе.
Он прекрасно подходит для большинства случаев, а использование синтаксиса async/await делает его еще лучше. Обратите внимание, что это работает только для одного уровня вложенности. Если требуются вложенные редукторы, придется вызывать combineReducers() самостоятельно. Конечно, он делает запросы Ajax и обновляет свое локальное состояние. Но если другие области приложения надо изменить на основе нового поступившего списка пользователей, этой стратегии будет недостаточно. Этот пример был немного изменен в сравнении с оригиналом.
Содержит ряд инструментов, позволяющих значительно упростить передачу данных хранилища через контекст. Это позволяет использовать их и как вспомогательные функции, и как редукторы. Функция, которая принимает тип операции и колбек, возвращающий промис. ExtraReducers позволяет createSlice() обрабатывать дополнительные типы операции. После создания хранилища Redux немедленно вызывает редукторов и использует возвращенные ими значения в качестве исходного состояния.
Этот файл является образцом того, как может выглядеть основная входная точка приложения. В нашем примере Ajax мы отправляем только одно действие. Оно называется ‘USER_LIST_SUCCESS’, так как мы также хотим отправить действие ‘USER_LIST_REQUEST’ до выполнения Ajax и действие ‘USER_LIST_FAILED’ в случае неудачи. Не забудьте прочитать документацию по асинхронным действиям. Если вы прочитали документацию Redux, вы могли заметить второй аргумент в createStore(), который предназначен для “исходного состояния”. Это может показаться альтернативой редукторам при создании исходного состояния.
Таким образом, редуктор createPost становится типом операции posts/createPost, а создатель createPost() возвращает операцию с этим типом. Хотя наш редуктор из примера технически исправен, он изменяет состояние, что является плохой практикой. Несмотря на то, что редукторы ответственны за изменение состояния, они никогда не должны изменять текущее состояние напрямую. Именно поэтому мы не используем метод .push(), который изменяет массив, для обработки состояния редуктором. Метод dispatch() передает объект, известный как действие, в Redux. Учитывайте, что за исключением свойства kind, весь дизайн объекта-действия зависит от вас.
Все данные о состоянии приложения хранятся в одном месте, без копий. Глобальное состояние организовано как дерево объектов и называется state tree. Также используются термины «источник состояния» и «хранилище».
Как и следует из ее названия, эта функция вызывает следующую в цепочке мидлвару. Если текущая мидлвара уже последняя, то вызывается редьюсер. Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним.
В это время Redux передает текущее состояние (это по-прежнему пустой массив) вместе с действием в редуктор. Объект действия получает свойство ‘ADD_USER’, позволяющее редуктору узнать,как следует изменять состояние. Изменение данных внутри хранилища порождает события, на которые можно подписываться и выполнять произвольную логику — например, перерисовку экрана. В этом случае данные внутри Redux изменяются через указание действий (actions), а не напрямую, как при работе с обычными объектами. Библиотека для JavaScript с открытым исходным кодом, предназначенная для управления состоянием приложения. Чаще всего используется в связке с React или Angular для разработки клиентской части.
Существует довольно много стратегий для создания и управления действиями и типами действий. Хотя их знание будет весьма полезным, они не столь критичны, как остальная информация в этой статье. Чтобы не слишком раздувать ее объем, мы документировали базовые стратегии действий, о которых вам стоит знать в репозитории на GitHub, сопровождающем серию. Важно заметить следующий момент — каждый редуктор передает соответствующий раздел общего состояния, а не все состояние хранилища, как в примере с одним редуктором. Состояние, возвращенное каждым редуктором, попадет в его раздел.
Обратите внимание, что сейчас мы передаем презентационный компонент напрямую вместо создания собственного компонента-контейнера для передачи. Они также передают состояние в дочернее представление как свойства. И это именно то, что делает connect() — передает состояние (через свойства) в презентационный компонент и возвращает компонент-обертку для презентационного компонента.
Библиотека Redux — это способ управления состоянием приложения. Она основана на нескольких концепциях, изучив которые, можно с лёгкостью решать проблемы с состоянием. Вы узнаете о них далее, в этом руководстве по Redux для начинающих. Чистая функция работает независимо от состояния программы и выдаёт выходное значение, принимая входное и не меняя ничего в нём и в остальной программе.
В данном случае мы определяем, что исходный файл приложения будет находится по пути “app/app.jsx”, а компилируемый файл будет находиться по пути “public/bundle.js”. Затем выполнится ветка default, и число one hundred станет состоянием хранилища. В этом примере мы создали хранилище Redux и объединили редюсеры для пользователей и счетчика. Замените userReducer и counterReducer на ваши собственные редюсеры.
Лучшие IT курсы онлайн в академии https://deveducation.com/ . Изучи новую высокооплачиваемую профессию прямо сейчас!
