Обмен данными между Redux приложением и сервером

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

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

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

Для Redux создано множество таких middleware, однако наиболее широко распространенным среди них и официально рекомендуемым при работе Redux приложений с асинхронной логикой пока еще остается Redux Thunk. Это ПО помогает нам использовать обычные функции (или thunks), которые могут содержать в себе асинхронный логику, такую как setTimeout, Promises, async/await, для взаимодействии с нашим store. Что касается самого термина, thunk - это код, который делает какую-то отложенную работу (от англ. thunk - думать).

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