React / Redux - отправка нескольких действий слишком быстро - PullRequest
Новая
       2

React / Redux - отправка нескольких действий слишком быстро

0 голосов
/ 03 июня 2019

В настоящее время я работаю над простым вариантом использования: выборка данных и их отображение.Для этого я сделал 3 действия: загрузка, сбой, успех, который я отправляю в соответствии с моими функциями.

Проблема в том, что иногда успех срабатывает сразу после загрузки ... И я просто получаю один вызовв mapStateToProps вместо двух.

Мой код подобен этому для обновления пользовательского интерфейса при получении данных: 

componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.isLoading && !this.props.isLoading) {
      if (this.props.error) {
        this.enqueueSnackbar(this.props.error, "error");
        return;
      }

      this.enqueueSnackbar("Success!", "success");
      this.props.history.push(routes.ITEMS);
    }
  }

isLoading всегда ложно, потому что я просто получаю успех из-за скорости получения...

Я пытался с таймаутом, и он работает 100% времени, но я бы хотел более чистое решение ...

Есть идеи?

1 Ответ

0 голосов
/ 03 июня 2019

Модель для React является более декларативным подходом, в то время как код, который вы здесь видите в componentDidUpdate, является более императивным подходом.Как правило, в React представление изменяется в зависимости от состояния приложения, поэтому в вашей функции рендеринга вы получите что-то вроде 

render() {
  if (this.props.loading) {
    return <LoadingComponent />
  }


  if (this.props.error) {
    return <ErrorSnackBar />
  }

  return <SuccessSnackBar />
}

. Этот декларативный подход облегчит рассмотрение и поддержку вашего приложения вдолгосрочный.

Если вам НУЖНО использовать императивный код для чего-то подобного, то вы захотите связать его именно с теми частями состояния, от которых зависят изменения.В вашем случае вы хотите отобразить панель с ошибками, когда есть ошибка, и панель с удачами, если она есть.Ваш текущий код излишне связывает состояние загрузки с этими отдельными частями представления.Вы хотели бы использовать что-то вроде 

componentDidUpdate(prevProps) {
  if (!prevProps.error && this.props.error) {
    // An error has occurred! Notice how *any* time an error occurs this
    // will run, not just when loading state changes
    this.enqueueSnackBar(this.props.error, 'error')
  }

  if (!prevProps.fetchedData && this.props.fetchedData) {
    // The data has been fetched! Do your stuff here.
    this.enqueueSnackBar("Success!", "success")
}
...