Я начал использовать React для одного из своих проектов. Наряду с этим я использовал redux-thunk для вызовов API. Почему? В основном потому, что я нашел документацию довольно простой, и в основном потому, что я наткнулся на этот пакет сразу после чтения о промежуточном программном обеспечении redux (довольно удивительный код, всего несколько строк, но глубоко погружается в основные концепции JS)

Теперь, на данный момент, я предполагаю, что у вас есть практические знания о следующем:

  1. Реагировать
  2. Redux
  3. Redux-thunk
  4. 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, где вы можете делать что-то вроде

Теперь, когда все конечные точки централизованы, код становится намного чище и проще в обработке.

Надеюсь, вам понравилось чтение. Вы можете подписаться на меня здесь в твиттере и здесь, на гитхабе.