Лучший способ справиться с загрузкой, успехом и ошибкой в ​​redux

Question

Сводка проблемы

Я работаю над проектом, в котором мы используем множество запросов API, и мы ожидаем, что это будет еще больше масштабироваться с множеством новых конечных точек. Проект построен с использованием Redux и Hooks. Мы хотели бы отделить запросы API от компонентов, поэтому мы стремимся все упростить. Однако возникает проблема: существует множество шаблонов, например: FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_ERROR, которые необходимо воспроизвести для каждой конечной точки. Кроме того, мы должны обрабатывать загрузку, успешность и ошибку для всех из них. Кажется, это очень много кода, особенно по мере роста приложения.

Что мы пробовали

Мы пытались создать собственный API Hook, который использует useReducer за сцены и возвращает динамически сгенерированные переменные loading, success и error. Этот хук предоставляет метод sendRequest, который может использоваться в компонентах как таковых:

sendRequest("GET", `${BASE_URL}/api/endpoint`);

Он работает хорошо, но есть проблема, мы создаем конечные точки API в компоненте, и это то, что мы будем хотелось бы изменить. Вот почему мы обратились к redux.

В идеале мы хотели бы отделить лог c загрузки и ошибок от редукторов, и мне интересно, есть ли у кого-нибудь идея (или знакомый пакет), которая может помочь уменьшить шаблон и достичь этой цели.

Answer 1

В официальном do c redux вы можете найти:

Когда вы вызываете асинхронный API, есть два важных момента во времени: момент, когда вы начинаете вызов, и момент получения ответа (или тайм-аут).

Каждый из этих двух моментов обычно требует изменения состояния приложения; для этого вам нужно отправить обычные действия, которые будут обрабатываться редукторами синхронно. Обычно для любого запроса API вы хотите отправить по крайней мере три различных типа действий ...

Выбор того, использовать ли один тип действия с флагами или несколько типов действий, зависит от ты. Это соглашение, которое вам нужно решить вместе со своей командой. Множественные типы оставляют меньше места для ошибки, но это не проблема, если вы генерируете создатели действий и редукторы с помощью вспомогательной библиотеки, например redux-actions .

Здесь это do c ссылка

Answer 2

const loading = () => {type: 'loading'}
const loaded = (data) => {type: 'loaded', data: data}
const error = (err) => {type: 'error', data: err}

const load = async() => {
dispatch(loading)
try{
 const res = await fetch ---- fetch here
if(res){dispatch(loaded(res))}
}catch{
(err) => {dispatch(error())}
} 
}

Редуктор

const initialState = {
  loading: false,
  data: {},
 error: false
}

export default(state = initialState, {type, data}) => {
  switch(type){
   case 'loading':
    return {
     ...state,
     loading: true
    }

    case 'loaded':
    return {
     ...state,
     loading: false,
     data: data
    }

    case 'error':
    return {
     ...state,
     loading: false,
     error: data
    }
  }
}