Есть ли функция в ReactJS, ожидающая завершения действия Redux, прежде чем загружать что-либо в классе?

Question

Можно ли дождаться завершения действия Redux перед загрузкой чего-либо в классе?

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

Будет полезно что-нибудь вроде

on('REDUX_ACTION_LOGGED_IN', () => {})

.

Я также видел онлайн-пакет примерно что-то вроде redux-wait-for-action. Может ли кто-нибудь научить меня, как это реализовать здесь? Документация не очень ясна.

Answer 1

Думаю, вы могли бы посмотреть на это по-другому.

Вы можете проверить, существует ли переменная / данные, а если нет, то сделать что-то еще.

Redux повторно визуализирует компонент, когда состояние меняется. Это означает, что вам не нужно ждать, пока это произойдет.

Что-то вроде этого в вашем рендере, вероятно, подойдет:

render(){
    <div>
       {someDataAfter.login ? <div> I am logged in!</div> : <div> I am logged out</div>}
    </div>  
}

Просто для полноты картины вот ссылка , чтобы объяснить? (тройное if) в функции рендеринга.

Другое решение - обернуть компонент другим. Этот родительский компонент может проверить, вошел ли пользователь в систему. Если это так, вы можете отобразить компонент, вошедший в систему, так:

render(){
   {loggedIn && <MySecuredComponent/>
}

Это не будет отображать или загружать MySecuredComponent, пока loggedIn не станет истинным. Значение componentDidMount не будет срабатывать в MySecuredComponent, пока loggedIn не станет истинным.