Блог

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

Предположим, что при получении списка книг возникает проблема с сетью или неправильный ответ API. Каков наилучший способ прервать оставшиеся действия и просто отобразить уведомление? Я использовал что-то вроде этого:

 import requestChaptersList from './chapterSlice'

// ...

const requestBooksList = createAsyncThunk(`${sliceName}/requestList`, async () => {
    return await api.books()
}

export const requestBooksListAndChapter = () => async (dispatch) => {
    await dispatch(requestBooksList())
        .then(unwrapResult)
        .then((res) => {
            dispatch(selectFirstBook())
            dispatch(requestChaptersList())
        })
        .catch((error) => {
            dispatch(notifyError(error))
        })
}
// ...
  

Проблемы заключаются в:

1. unwrapResult создает сериализованную версию исходной ошибки. Но мой notifyError (в идеале) должен получать объект ошибки или подкласс.

2. Без этого unwrapResult запускается requestBooksList редуктор отклонения, но .then ppart продолжается в обычном режиме.

3. Кажется, что он плохо масштабируется при увеличении количества запросов. Например, если бы я хотел последовательность Книга> Глава> Страница.