Redux，渲染信息的时机答案

【问题标题】：Redux, timing for rendering informationRedux，渲染信息的时机
【发布时间】：2020-01-23 20:59:48
【问题描述】：

我正在尝试在组件中使用我的 redux 存储中的信息，我需要更好地了解接收信息的时间。我有以下带有 mapStateToProps 调用的导航组件，我希望将个人资料图片链接加载到标题中......比如 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'”。我知道这个动作是异步的，页面首先加载没有信息，然后浏览器接收信息，但我不知道如何克服这个问题请帮忙。

谢谢，

【问题讨论】：

你好 Tyler，你什么时候设置你的 auth reducer 的内容？

标签： javascript reactjs redux react-redux timing

【解决方案1】：

根据您在上面截取的代码，听起来您的意图是在auth 减速器接合后的某个时间加载此组件。这是一个合理的要求，但不是 React/Redux 以某种方式强制执行或直觉的要求。

当您在浏览器中测试您的页面时（并收到“无法读取未定义的属性 'googleImage'”错误），请打开您的 Chrome 开发人员工具并查看您的 Redux 商店。您会发现，虽然您有一个 auth 对象，但它可能没有任何比例。

安装并设置 Chrome 扩展程序 Redux Dev Tools 并重新加载您的页面。打开开发控制台并浏览到 Redux 选项卡。您应该会看到所有已触发的 Redux 操作的列表，以及每个操作产生的状态更改。在错误发生时，您可能会看到尚未触发任何 USER_LOGGED_IN 操作（或调用您的任何操作），或者它确实触发了，但没有产生填充到身份验证工具中的状态更改。

如果在加载此组件的页面后调度逻辑操作，那么如果您确实需要确保在加载此组件时存在登录信息，则您需要更改应用程序的组织方式。

或者，您可以重组组件以在不存在身份验证信息时显示备用图标或元素。然后，一旦发生登录分派（并且reducer 填充了身份验证数据），您的组件将自动更新并重新渲染。

【讨论】：