Redux — показатель выполнения API-запроса?

Question

[mDrama]

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

Вопрос касается реализации статуса выполнения асинхронного запроса, благодаря которому компонента будет понимать, когда данные загрузились и можно их использовать при рендере (saga/thunk - не важно).

К примеру, я фетчу список каких-то айтемов с сервера, потом в родительской компоненте создаю список карточек для каждого айтема при помощи .map(). Мне нужно, чтобы компонента понимала, когда данные пришли и ей можно начинать их использовать для рендера.

Во всех туториалах пишут, что в редьюсере нужно свойство loading, isLoading (и тп):

const INITIAL_STATE = {
  allGamesCollection: null,
  loading: false,
  error: null
}

Вот у меня это свойство loading. По дефолту оно опять же как бы должно быть false. Для api-запроса мы создаем 3 экшена по типу fetchAllGamesStart, fetchAllGamesSuccess, fetchAllGamesFailure. И в них меняем значение loading.

case AllGamesActionTypes.FETCH_ALLGAMES_START:
      return {
        ...state,
        loading: true
      }
    case AllGamesActionTypes.FETCH_ALLGAMES_SUCCESS:
      return {
        ...state,
        allGamesCollection: action.payload,
        loading: false,
        error: null
      }
    case AllGamesActionTypes.FETCH_ALLGAMES_FAILURE:
      return {
        ...state,
        error: action.payload,
        loading: false,
        allGamesCollection: null
      }

Потом селектором забираем это свойство и импортим его в компоненту, в которой потом будет что-то вроде этого:

{
     loading ? <Spinner /> : allGames.map(game => <GamePreviewItem game={game} key={game.id} />)
}

Spinner - это просто мини-компонента с крутящейся анимацией загрузки. Вместо нее можно просто вписать null.

Моя проблема в том, что если в редьюсере по дефолту стоит значение false, то компонента сразу выбивает ошибку, так как пытается мапить данные, когда они еще не пришли. Происходит это потому, что (насколько я понимаю) она изначально забирает из редьюсера loading с его дефолтным значением (false). В редьюсере ему можно дать значение дефолтное true и все будет работать нормально. Но это нелогично. Да и везде на всех сайтах у таких свойств значение false и я не понимаю, как у них это работает и почему не работает у меня.

Answer 1

[Дмитрий Свиридов]

А если вот так?

const INITIAL_STATE = {
  allGamesCollection: [],
  loading: false,
  error: null
}

Comments

[mDrama]

Да, чет когда писал уже сам об этом подумал. Спасибо)

Если кому интересно, то проблема была в null. Если там пустой массив, то компоненте просто нечего будет мапить, но и ошибки не будет. А так она пыталась мапить null и сразу выбивала ошибку.

upd: А можно еще вопрос?

Если я c сервера конкретный 1 объект получаю, то какой дефолтный параметр в редьюсере указывать? Просто если компонента с его свойствами пытается взаимодействовать, то ошибка энивей вылетать будет.

[Дмитрий Свиридов]

mDrama, я использую null, а render делаю примерно так:
{post && <h1>{post.headline}</h1>}

[mDrama]

Дмитрий Свиридов, А если компонента очень большая? Объект прилетает с кучей свойств, которые нужно отображать на странице.

https://i.gyazo.com/f22d4ebadf7a6e0d3cd1c34c39d2f9..."


Не легче будет ли проще изначально сделать проверку на сам объект, а потом уже рендерить все что нужно?

Типо такого:

if (!object) {
    return <Spinner />
  } 
  
  return (
  вся нужная разметка
  )

Просто тогда выходит, что свойство loading вообще не нужно.

[Дмитрий Свиридов]

mDrama, можно и так, а можно содержимое, которое отображается только тогда, когда объект есть, вынести в отдельную компоненту (Post в моем примере) как-то так:

return <>
{!props.post?
  <Spinner />:
  <Post post={props.post}/>
}
</>

Это все, думаю, от ситуации зависит

[mDrama]

Дмитрий Свиридов, ага, понял. Большое спасибо за ответы!