根据 Redux 中的状态更新 Navigator 组件答案

【问题标题】：Updating Navigator component depending on state in Redux根据 Redux 中的状态更新 Navigator 组件
【发布时间】：2016-03-16 18:29:58
【问题描述】：

假设我有两个子组件，登录和个人资料。登录默认通过 Navigator 呈现

<Navigator initialRoute={{name: 'login'}} renderScene={this.renderScene} />

这是我的 renderScene 方法

renderScene(route) {
    switch (route) {
        case 'login':
            return <Login / >;

        case 'profile':
            return <Profile / >;
    }
}

因此，当有人通过 Login 登录时，状态会更新，并且所有内容（包含 Navigator 的主应用程序容器）都会重新呈现。那么，我应该在何时何地将 Profile 路由真正推送到导航器？

我是否根据 renderScene 方法中的状态更改初始路由？

还是在重新渲染后推送新路由？

或者我应该使用 shouldComponentUpdate 而不是重新渲染而是将新路由推送到导航，具体取决于状态。

【问题讨论】：

您需要使用更多代码示例更新您的问题。通常你会在<Navigator/> 组件的onClick 处理程序中执行此操作。当用户点击链接时调用动作创建者dispatch(changeRoute('login')); 或当用户登录dispatch(login('user', 'pass'));。
谢谢 Mike，我在调度动作或读取状态方面完全没有问题。我的问题是关于根据状态更改导航器的 initialRoute 。这个initialRoute最初是Login，所以Navigator渲染了Login页面，但是在我登录并传入新状态后，这将重新渲染Navigator，在这里我尝试将initialRoute更改为其他内容，而我的函数确实显示了更改，renderScene 方法仍然读取 Login。我也尝试使用 InitialRouteStack 并拼接出 Login 但仍然是相同的结果。
请添加更多代码；还不足以找出问题所在。听起来您需要connect() 一个组件来访问mapStateToProps 中的状态以获取初始路由。
我的问题不在于 redux 或其架构，我已经连接。我会尝试用更多代码更新我的问题

标签： reactjs react-native redux navigator

【解决方案1】：

您可以像这样使用 Redux 的强大功能并维护经过身份验证的会话的状态，

const initialState = { session: { isAuthenticated: getToken() ? true : false } }

这里getToken 可以是获取访问令牌的方法。通常，当服务器验证登录并成功响应时，您将其存储在本地存储中。

由于您已经使用 [connect()][1] 将组件连接到商店，您现在可以访问状态为 this.props，您现在可以在您的 renderScene 方法中执行以下操作。

renderScene(route, navigator) { const { session } = this.props route = session.isAuthenticated ? { id: 'login' } : { id: 'profile' } switch (route.id) { case 'login': // Return the login component case 'profile': // Return the profile component default: // Return default component } }

有了这个，你真的不需要推动，因为状态改变会触发重新渲染。您可以根据需要在此处添加更多逻辑，但希望这可以帮助您入门，如果您还没有弄清楚的话。

【讨论】：