Если вы работали с React до того, как вы, скорее всего, столкнулись со встроенным объектом состояния, доступным в компонентах React. Объект состояния позволяет нам хранить значения свойств, принадлежащих компоненту, в котором они были объявлены. Наша возможность получить доступ к состоянию, объявленному в одном компоненте, из другого компонента вполне возможна в нашем приложении, но может стать запутанной по мере роста нашего приложения, и нам нужно повторно использовать информацию, содержащуюся в объекте состояния, в других компонентах нашего приложения.
Redux — это инструмент управления состоянием, который помогает решить некоторые проблемы, с которыми мы сталкиваемся при работе с локальным состоянием компонента, и дает нам возможность хранить все наше состояние в объекте Javascript отдельно от всех наших компонентов. Это разделение дает нам возможность разрешить любому компоненту в нашем приложении доступ к нашему состоянию, просто подключив его к нашему хранилищу, которое содержит все состояние нашего приложения. Это очень общий обзор Redux и возможностей, которые он нам предоставляет. Если вы еще не работали с Redux, я рекомендую ознакомиться с их документацией, так как оставшаяся часть этой статьи будет посвящена белому жизненному циклу асинхронного запроса с использованием промежуточного программного обеспечения Redux Thunk.
Для проекта в программе Flatirons Software Engineering я создал приложение, в котором использовалась передняя часть React с внутренней частью Rails API. Это приложение использовало Redux для управления состоянием всего приложения на стороне клиента. В обычном хранилище Redux мы можем реализовать синхронные обновления только тогда, когда мы отправляем наши действия. Однако когда мы запрашиваем информацию из внешнего API или внутреннего API нашего приложения, нам необходимо использовать асинхронный подход при извлечении и сохранении данных. Здесь в игру вступает промежуточное ПО Thunk.
Redux Thunk позволяет нам выполнять эти асинхронные запросы, возвращая функцию в нашем создателе действия вместо действия. Внутренняя функция, которая возвращается в нашем создателе действия, принимает в качестве аргументов «dispatch» и «getState». Создатель действия, показанный ниже, использует функцию отправки, передаваемую в качестве аргумента, для отправки редюсеру двух разных действий.
Первый вызов отправки сообщает нашему редьюсеру, что мы запрашиваем данные новостей из внешнего API. Это действие вызовет случай в нашем операторе switch, который обновит наше состояние, изменив значение флага «запрос» на true. Значение запрашивающего атрибута в нашем объекте состояния позволяет нам обновлять то, что отображается на стороне клиента, пока мы извлекаем наши данные, такие как счетчик или полоса загрузки. Когда вызов Fetch возвращает объект Promise и Response, мы можем затем манипулировать этими данными по своему усмотрению и отправить второй диспетчерский вызов, изменив значение флага «запрос» и обновив состояние нашего приложения, завершив цикл запроса.
Надеемся, что этот краткий обзор дал вам лучшее представление о Thunk в Redux и о том, как вы можете реализовать его в своих создателях действий для выполнения асинхронных операций.
