Выполнение вызовов API с помощью React для извлечения данных и их рендеринга

Оба подхода верны. Это зависит от вашего варианта использования. Если вы можете избежать использования избыточности в своем приложении, используйте методы жизненного цикла для выполнения вызовов API (также называемых подписками в документации по реакции). Если вы считаете, что в вашем приложении много компонентов, и разные компоненты должны иметь общее состояние, используйте избыточность.

Вы также должны посмотреть на хуки React https://reactjs.org/docs/hooks-reference.html Вы можете использовать эффект-хук https://reactjs.org/docs/hooks-effect.html для выполнения вызовов API и обновления состояния вашего компонента.

Обновлять:

И Thunk, и Sage используются для управления побочными эффектами в вашем приложении (выполнение вызовов API отсюда). Я использовал сагу, я мало знаю о thunk.

Как бы вы использовали redux-saga: Скажем, если вы хотите получить некоторые данные для отображения при нажатии кнопки, вот как это работает:

• При нажатии кнопки вы отправляете действие, скажем, GET_DATA
• Ваш редукционный редуктор изменит некоторое состояние этого конкретного действия, скажем, isLoading=true
• Вы можете использовать isLoading в своем компоненте, чтобы показать счетчик/наложение
• В то же время сага будет прослушивать действие GET_DATA и выполнять вызов API.
• В случае успеха из Saga вы отправите действие, скажем, GET_DATA_SUCCESS с данными из вызова API.
  • Редюсер изменит isLoading=false и установит данные в состояние, скажем, apiData = { ... }
• В случае сбоя из Saga вы отправите действие, скажем, GET_DATA_FAILED с кодом/сообщением об ошибке.
  • Редьюсер изменит isLoading=false и установит ошибку в состоянии, скажем, apiError = { ... }
• Теперь вы можете использовать isLoading=false в своем компоненте, чтобы удалить счетчик и отобразить данные (apiData) или ошибку (apiError) в вашем компоненте.

Вы можете пройти это руководство, чтобы узнать больше https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html