Redux中user变量控制台显示不为空却被判定为null，始终渲染Login组件

问题根因 #

你的Redux状态层级和取值判断不匹配：
userSlice的内部状态结构是{ user: 真实用户信息 }，注册到全局Store后，完整的全局状态层级为：

{
  // 根状态下的user对应整个userSlice的状态对象
  user: {
    // slice内部的user字段才是你存储的用户数据，登录后这个字段才会不为null
    user: null | { email: string, uid: string, displayName: string ... }
  }
}

你当前定义的selectUser选择器返回的是根状态下的user（也就是整个slice的状态对象），这个外层对象永远不会为null，你用!user判断是否登录的逻辑和实际取值完全错位，才会出现状态显示登录但页面始终渲染登录页的问题。

修复方案 #

任选以下一种即可，效果完全一致：

方案1：修改选择器，直接返回真实用户数据 #

修改userSlice.js中的selectUser定义：

// 原代码
// export const selectUser = (state) => state.user;
// 修改后
export const selectUser = (state) => state.user.user;

方案2：修改App.js的判断条件，补全状态层级 #

修改App.js中的登录判断逻辑：

// 原代码
// {!user ? <Login></Login> : (
// 修改后
{!user.user ? <Login></Login> : (

修复后可以在App.js中打印user变量确认取值，就可以正常根据登录状态渲染对应页面了。

内容的提问来源于stack exchange，提问作者Guillaume Ayad