Redux - статус выполнения API-запроса
Добрый день. Помогите разобраться со способом нормально устанавливать статус выполнения какого-нибудь асинхронного запроса (saga/thunk - не важно).
Во всех туториалах пишут, что у нас в редьюсерах в inital state должно быть что-то вроде loading/isloading и тд:
Код:
const INITIAL_STATE = {
trendingGames: null,
loading: false,
error: null
}
Таким образом мы даем понять, что у нас что-то фечится или нет.
А потом в экшенах мы уже меняем этот статус:
Код:
case TrendingActionTypes.FETCH_TRENDING_START:
return {
...state,
loading: true
}
case TrendingActionTypes.FETCH_TRENDING_SUCCESS:
return {
...state,
trendingGames: action.payload,
loading: false,
error: null
}
Но если я потом забираю селектором это свойство в компоненту и пытаюсь проверять по ней, выполнился ли запрос, то я получаю ошибку.
Код:
{
loading ? null : allGames.map(game => <GamePreviewItem game={game} key={game.id} />)
}
Ошибка дефолтная. Как будто я пытаюсь взаимодействовать с Null: TypeError: Cannot read property 'map' of null.
При этом если я буду проверять по наличию самих данных, то все будет норм.
Код:
{
allGames ? allGames.map(game => <GamePreviewItem game={game} key={game.id} />) : null
}
Насколько я понимаю, при рендере компоненты и первоначальной проверки пропсов, loading забирается из редьюсера со своим изначальным значением (false), а потому компонента пытается мапить данные, которые еще не пришли и сразу выбивает ошибку. Это подтверждается еще и тем, что если изначальное значение в редьсюере у loading сделать true, то все будет работать нормально.
Но это нелогично, да и везде во всех примерах loading: false по дефолту. И я не понимаю, как это работает и почему не работает у меня. |