отправить действие в componentDidMount, который получает в качестве полезной нагрузки редукторный реквизит

Question

Каков наилучший способ инициировать действие внутри componentDidMount () с использованием редуктивных реквизитов?Например:

import { fetchUser } from '../actions'
    class Example extends Component {
          ComponentDidMount(){
            this.props.fetchUser(this.props.id)
          } ... 

mapDispatchToProps = dispatch => ({
   fetchUser: (payload) => dispatch(fetchUser(payload))
})

mapStateToProps = state => ({
 id: state.user.id
})

Проблема в том, что ComponentDidMount () монтируется до того, как класс даже получает реквизиты из хранилища.Таким образом, my this.props.id = = undefined внутри метода.Одно решение, которое я нашел, состояло в следующем: но я не знаю, является ли это лучшим способом:

    import { fetchUser } from '../actions'
        class Example extends Component {
     fetchUser = () => {
     this.props.fetchUser(this.props.id)
              }
render(){
  if(this.props.id !== undefined) this.fetchUser()
 } ...
}

    mapDispatchToProps = dispatch => ({
       fetchUser: (payload) => dispatch(fetchUser(payload))
    })

    mapStateToProps = state => ({
     id: state.user.id
    })

Таким образом, я получаю заявку, но я не думаю, что это лучший способ.Любое предложение?

Answer 1

Вы должны понимать жизненный цикл реагирующих компонентов.Когда компонент монтируется, он может извлекать данные, но вашему компоненту в этот момент необходимо что-то визуализировать.Если данные еще не были загружены, вы должны либо возвратить ноль, чтобы сообщить реагировать, что он ничего не рендерит в этот момент, или, возможно, индикатор загрузки, показывающий, что он выбирает данные?

import { fetchUser } from '../actions'

class Example extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }
    render(){
        const { loading, error, user } = this.props;

        if (loading) {
            return <LoadingIndicator />;
        }

        if (error) {
            return <div>Oh noes, we have an error: {error}</div>;
        }

        // Render your component normally
        return <div>{user.name}</div>;
    }
}

Ваш редукторпо умолчанию загрузка должна быть установлена ​​в значение true, а при завершении выборки установите загрузку в значение false и либо установите пользователя, либо ошибку в зависимости от того, будет ли выборка завершена неудачно / завершится.

Answer 2

Вы пробовали использовать async / await?

async ComponentDidMount(){
 await this.props.fetchUser(this.props.id)
} ...