Redux Toolkit集成后currentUser登出时未重置为null问题

问题描述 #

Header组件根据currentUser是否为null切换登录/登出按钮，使用本地状态时功能正常，但集成Redux Toolkit后，登出时currentUser无法重置为null，导致按钮切换逻辑失效。

问题原因 #

在App.js的onAuthStateChanged回调中，当用户登出（userAuth为null）时，错误地将userAuth包装成对象传入setCurrentUser：

else
  setCurrentUser({userAuth})

这会让Redux中的currentUser变成{userAuth: null}这个对象（而非null值），而对象属于真值，所以Header里的currentUser ? ... : ...判断永远为true，无法触发登录按钮的显示。

解决方案 #

修改App.js中onAuthStateChanged的else分支，直接传入userAuth（即null），而非包装成对象：

修改后的App.js相关代码：

this.unsubscribeFromAuth=auth.onAuthStateChanged( async userAuth=>{
  if (userAuth){
    const userRef= await createdUserProfileDocument(userAuth);
    userRef.onSnapshot(snapShot=>{
      setCurrentUser({
        id:snapShot.id,
        ...snapShot.data()
      })
    })
  } else {
    // 直接传入userAuth（此时为null），而非包装成对象
    setCurrentUser(userAuth)
  }
})

验证逻辑 #

当用户执行登出操作时，Firebase的onAuthStateChanged会触发userAuth为null，此时调用setCurrentUser(null)，Redux中的currentUser会被正确重置为null。Header组件的判断currentUser ? ... : ...会识别到null值，自动切换回登录按钮，恢复正常功能。

内容的提问来源于stack exchange，提问作者kidus feleke