@lacront

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

Есть компонент, получающий информацию с сервера. Если информация не была загружена, в хуке 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 или есть способ проще?
  • Вопрос задан
  • 548 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Не надо обрабатывать подобные вещи в 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 метод так, чтобы он успешно выполнялся вне зависимости от того получили вы необходимые данные или нет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы