Как правильно использовать mapStateToProps с асинхронным поведением компонента?

Question

[lacront]

Есть компонент, получающий информацию с сервера. Если информация не была загружена, в хуке componentDidMount() вызывается функция загрузки. mapStateToProps естественно не дожидается окончания загрузки и возвращает пустой объект. В данный момент написал следующий код:

class CoinDetails extends React.Component {
  componentDidMount(){
    if (this.props.isLoading){
      this.props.fetchCoinData() //старт загрузки, если данных нет
    };
  }

  render(){
    if (this.props.isLoading){
      return (
        <div>
          'Loading ...'
        </div>
      )
    } else {
      return (
        <div>
          {this.props.coin.name}
        </div>
      )
    }
  }
}

const coinSelector = (state, ownProps) =>
  state.coins.data.find(coin => coin.symbol === ownProps.match.params.id);

const mapStateToProps = (state, ownProps) => {
  if (state.coins.hasOwnProperty('data')){   //если данные есть
    return {
      coin: coinSelector(state, ownProps),
      isLoading: state.isLoading.coins,
    }
  } else {   //данных нет
    return {
      isLoading: state.isLoading.coins
    }
  }
};

const mapDispatchToProps = {
    fetchCoinData,
}

export default connect(mapStateToProps, mapDispatchToProps)(CoinDetails);

Можно ли вообще реализовывать подобную логику в функции mapStateToProps или есть способ проще?

Answer 1

[Антон Спирин]

Не надо обрабатывать подобные вещи в mapStateToProps. Оставьте просто:

const mapStateToProps = (state, ownProps) => ({
  coin: coinSelector(state, ownProps),
  isLoading: isCoinsLoadingSelector(state),
});

В методе render:

render() {
  const { coin, isLoading } = this.props;

  if (isLoading) return <Preloader />;

  if (!isLoading && !coin) return <NotFound />;

  return <CoinDetails coin={coin} />;
}

Учитесь проектировать хранилище, задавать начальное состояние и писать render метод так, чтобы он успешно выполнялся вне зависимости от того получили вы необходимые данные или нет.

Comments

[lacront]

Сделал как вы написали, только пришлось добавить логику в функцию coinSelector:

const coinSelector = (state, ownProps) => {
  if (!state.isLoading.coins){
    return state.coins.data.find(coin => coin.symbol === ownProps.match.params.id);
  }
}

[Антон Спирин]

lacront, а зачем? у вас должен храниться в начальном состоянии пустой массив.
По-хорошему, например, так:

const initialState = {
  data: [],
  isLoading: false,
  isError: false,
};

И тогда проверка if (!state.isLoading.coins){} будет не нужна.

[lacront]

Антон Спирин, В начальном состоянии хранится пустой объект, но у него нет ключа "data", который используется в функции coinSelector()

[lacront]

Антон Спирин, Все, извиняюсь, моя ошибка, поправил начальное состояние, теперь все работает.