Redux状态与useState不同步：如何实现Redux状态变更同步到useState

你的问题很典型——useState的初始值只会在组件第一次渲染时被赋值，哪怕后续Redux的userDataStore更新了，本地的userValues也不会自动跟着变。要实现两者的同步，只需要添加一个useEffect钩子来监听Redux状态的变化：

const Account: React.FC<Props> = ({ logInAction, userDataStore }) => { 
  // 初始值还是用userDataStore，但后续靠useEffect更新
  const [userValues, setUserValues] = useState<User | null>(userDataStore as User); 

  // 监听userDataStore的变化，同步到本地状态
  useEffect(() => {
    // 可选：如果需要在userDataStore为null时也同步，就去掉这个if判断
    if (userDataStore) {
      setUserValues(userDataStore);
    }
  }, [userDataStore]); // 依赖数组：只有当userDataStore变化时才执行回调

  return ( 
    <Text> 
      {/* 用可选链操作符避免userValues为null时抛出错误 */}
      Fullname: {userValues?.fullName} 
    </Text> 
  ); 
  . . . 
};
export default connector(Account);

为什么这样可行？ #

• useEffect的依赖数组里包含userDataStore，每当Redux中的这个状态更新时，组件会重新渲染，同时触发useEffect的回调函数。
• 在回调里调用setUserValues，就能把最新的Redux状态同步到本地的useState中，保证两者始终保持一致。

额外提醒 #

如果你的场景只是展示数据，其实直接使用Redux的userDataStore会更简单，没必要多一层本地状态同步。但如果是需要基于Redux状态做本地编辑（比如表单输入），后续再把修改后的状态提交回Redux，这种同步方式就非常合适。

内容的提问来源于stack exchange，提问作者Abdelhadi Abdo