Redux асинхронная проблема при получении текущего состояния

Question

У меня возникла асинхронная проблема при получении состояния в моем компоненте. Когда я консольный логин в mapStateToProps, это получается нормально, но когда я консольный лог внутри моего рендера ... это приходит как старое состояние. Как я могу связать функции в редуксе?

import React, { Component } from 'react';
import Routes from './Routes'
import HomePage from './HomePage'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../actions/listingActions.js'

class App extends Component {
  componentDidMount() {
    if (this.props.listings.length === 0) {
    this.props.actions.fetchListings()
   }
  }

  render() {
    return (
      <div className="App">
        <Routes />
        console.log(this.props.listings); // old state gets printed out
        <HomePage listings={this.props.listings} />
      </div>
     );
   }
 }


const mapStateToProps = (state) => {
  console.log(state.listings.listings); // comes correctly
  return { listings: state.listings.listings };
};

function mapDispatchToProps(dispatch) {
  return {actions: bindActionCreators(actions, dispatch)}
}

const WrapperApp = connect(mapStateToProps, mapDispatchToProps)(App);

export default WrapperApp;

Answer 1

связать индивидуальное действие в mapDispatchToProps

componentDidMount() {
    if (this.props.listings.length === 0) {
        this.props.fetchListings()
    }
}


function mapDispatchToProps(dispatch) {
    return {fetchListings: bindActionCreators(actions.fetchListings, dispatch)}
}

Answer 2

TL; DR: отправить ваше действие после того, как вы настроили хранилище:

 // const store = createStore(...); // wherever you have this line (often in index.js)
 store.dispatch(actions.fetchListings());

И поместите заполнитель (или ничего не рендерит), пока он не разрешится:

<Routes />
    {this.props.listings.length? <HomePage listings={this.props.listings} />:null}
 ...

NL, PR:

Когда создается экземпляр WrapperApp, вызывается Apps render, а затем componentDidMount, таким образом, ваш диспетчерский вызов запланирован после первого рендеринга. Лучше всего как можно быстрее отправлять действия по извлечению (запросы данных с сервера), они неблокируют. И пока они загружаются, отметьте это в рендере и а) ничего не показывайте (ноль) или б) покажите заполнитель: анимация загрузки, заставку, сообщение ...