Я начал использовать React для одного из своих проектов. Наряду с этим я использовал redux-thunk для вызовов API. Почему? В основном потому, что я нашел документацию довольно простой, и в основном потому, что я наткнулся на этот пакет сразу после чтения о промежуточном программном обеспечении redux (довольно удивительный код, всего несколько строк, но глубоко погружается в основные концепции JS)
Теперь, на данный момент, я предполагаю, что у вас есть практические знания о следующем:
- Реагировать
- Redux
- Redux-thunk
- Axios (для вызовов API)
Если вы не знаете ни о чем из вышеперечисленного, я бы посоветовал сначала просмотреть их. Это может подождать…
Хорошо, давайте начнем. В redux нам в основном нужны редукторы, действия, диспетчеризация и состояние, которые являются единственным источником истины. Я могу обновить состояние, отправив действие и указав тип.
Точно так же в случае сетевых вызовов я вызываю API (я бы назвал его конечной точкой для дальнейших ссылок) и dispatch
данные, возвращаемые в моем ответе, для обновления хранилища.
Рассмотрим следующий пример: -
Здесь я вызываю этот API /api/v0/login
, который возвращает мне токен, который я обновляю в своем магазине.
Теперь, если вы видите, я жестко запрограммировал конечную точку в своем действии. На самом деле я начал с этого свой проект. Но по мере того, как требования продолжали расти, мне приходилось иметь дело с чем-то близким 50 endpoints
. Жесткое кодирование каждой конечной точки непосредственно в действиях явно не лучший способ сделать это. Это было совершенно не масштабируемо.
Меня больше всего беспокоило, изменит ли бэкэнд-команда версию api в любое время в будущем, скажем, с v0 to v1
; Мне нужно выполнить глобальный поиск в моем редакторе, а затем заменить все вхождения; что не совсем изящное решение.
Поэтому я решил создать константу с именем BASE_API= /api/v0
и вызывать ее во всех своих действиях оттуда. В любое время в будущем мне нужно будет изменить версию api, я делаю это в этой переменной.
Это сработало нормально, но через несколько дней я пытался отладить свой код и заметил, что мне приходилось переходить от одной функции действия к другой функции действия, чтобы отслеживать конечные точки (конечные точки все еще жестко запрограммированы). Поэтому я подумал, почему бы не переместить все конечные точки в один файл и в действиях не читать их как переменные. Я попробовал это и придумал что-то вроде следующего.
Вышеупомянутое работает нормально, если у меня нет никаких переменных параметров в вызовах API.
Теперь предположим, что если я хочу получить информацию для определенных пользователей, моя конечная точка будет чем-то похожим на /api/v0/user/
(идентификатор пользователя). Действия для этого будут примерно такими: -
Вы можете найти ошибку в коде? Действительно!! Я не передаю идентификатор пользователя в вызове конечной точки.
Итак, как передать переменные параметры в конечные точки, в то время как все конечные точки хранятся в одном файле. Я вырос в среде Python, поэтому я привык использовать format
, поэтому я подумал, почему бы не попробовать что-то подобное в Javascript.
Для этого я добавил функцию format
в String.Prototype
, которая считывает переданные ей аргументы и заменяет { }
переданными параметрами.
Теперь мне просто нужно вызвать формат строки и передать переменные этой функции форматирования.
Это работает точно так же, как python, где вы можете делать что-то вроде
Теперь, когда все конечные точки централизованы, код становится намного чище и проще в обработке.
Надеюсь, вам понравилось чтение. Вы можете подписаться на меня здесь в твиттере и здесь, на гитхабе.