Redux, время для рендеринга информации - PullRequest
Новая
       4

Redux, время для рендеринга информации

0 голосов
/ 23 января 2020

Я пытаюсь использовать информацию из своего редукционного магазина в компоненте, и мне нужно лучше понять время получения информации. У меня есть следующий компонент навигации с вызовом mapStateToProps, и я хотел бы, чтобы ссылка на профиль pi c загружалась в заголовок ... как Facebook или многие сайты, на которых зарегистрирован пользователь. 

class Navigation extends Component {

// IF WE HAVE A USER PROFILE, DYNAMICALLY DEFINE THE LOGIN/PROFILE PICTURE 
    renderContent() {
        switch (this.props.auth.data) {
            case null:
                return;
            case false || "":
                return (
                    <Button href='/auth/google'>Login</Button>
                );
            default:
                return <img src={this.props.auth.data.googleImage} alt='Profile Image' />
        }
    }

// MY NAVIGATION COMPONENT WITH A {this.renderContent()} CALL
    render() {
        console.log(this.props.auth)
        return (
            <nav id="nav">
               ... this.renderContent() ...
            </nav>
        );
    }
}

function mapStateToProps(state) {
    return { auth: state.auth }
}
export default connect(mapStateToProps)(Navigation);

Когда компонент загружается, я получаю сообщение об ошибке «Не удается прочитать свойство« googleImage »из undefined». Я понимаю, что это действие является асинхронным, и страница сначала загружается без информации, затем браузер получает информацию, но я не уверен, как решить эту проблему. Пожалуйста, помогите.

Спасибо,

1 Ответ

0 голосов
/ 24 января 2020

Исходя из кода, который вы взяли выше, похоже, что вы намереваетесь загрузить этот компонент через некоторое время после включения редуктора auth. Это разумное требование, но не то, которое каким-то образом предписывается или интуитивно применяется React / Redux.

Когда вы тестируете свою страницу в браузере (и получаете сообщение об ошибке «Невозможно прочитать свойство« googleImage »из неопределенного») Откройте инструменты разработчика Chrome и загляните в свой магазин Redux. Вы обнаружите, что, хотя у вас есть объект auth, он, вероятно, не имеет пропорций.

Установите и настройте расширение Chrome Redux Dev Tools и перезагрузите страницу. Откройте консоль разработки и перейдите на вкладку Redux. Вы должны увидеть список всех действий Redux, которые были запущены, вместе с изменениями состояния, которые каждое из них произвело. Во время ошибки вы, вероятно, увидите, что либо действие USER_LOGGED_IN еще не было выполнено (или как называется ваше действие), либо оно сработало, но не вызвало изменения состояния, которое заполняло инструменты auth.

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

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

...