Redux结合React Hooks跨页面状态共享及不更新问题求解

场景说明 #

• 预期交互流程：
  1. 页面A初始展示标题为myTitleScreenA
  2. 跳转进入页面B后，用户将标题修改为myTitleScreenB
  3. 页面B通过dispatch操作将新标题写入Redux Store
  4. 从页面B导航返回页面A时，页面A自动加载最新标题myTitleScreenB
• 实际异常表现：页面B完成dispatch后，返回页面A时，页面A的本地diary状态没有同步更新为Redux存储的最新值

现有代码片段 #

页面A 取值逻辑 #

const diaryData = useSelector(({diaryState}) => diaryState.data);
const diaryIndex = useSelector(({diaryState}) => diaryState.index);

const [diary, setDiary] = useState(diaryData[diaryIndex]);

useEffect(() => {
    console.log('im here');
    setLoad(true);
    setDiary(diaryData[diaryIndex]);
    setLoad(false);
});

页面B 状态提交逻辑 #

diary.growDimens = growDimens;
 diary.lightingType = lightingType;
 diary.lumens = lumens;

 diaryData[diaryIndex] = diary;
 dispatch(diaryFetchSuccess(diaryData));

问题根因 #

• Redux Store的状态更新检测基于浅引用对比：页面B里直接修改原数组的元素、给原对象的属性赋值，全程没有生成新的数组引用、新的对象引用，Redux感知不到状态变化，绑定了该状态的useSelector自然不会触发重渲染。
• 页面A的useEffect没有设置依赖项：这个effect只会在组件首次挂载、或者父组件触发重渲染时执行，哪怕Redux真的更新了状态，effect也不会自动运行去同步本地state。

可行修正方案 #

1. 调整页面B的状态提交逻辑，严格遵循Redux不可变更新原则，所有状态修改必须生成新的引用值，禁止直接修改原对象/原数组：

   // 基于旧diary生成带新属性的新对象，不改动原对象
   const updatedDiary = {
     ...diary,
     growDimens,
     lightingType,
     lumens
   };
   // 基于旧diaryData生成新数组，替换对应下标的元素，不改动原数组
   const updatedDiaryData = [
     ...diaryData.slice(0, diaryIndex),
     updatedDiary,
     ...diaryData.slice(diaryIndex + 1)
   ];
   dispatch(diaryFetchSuccess(updatedDiaryData));
   

2. 调整页面A的effect逻辑，补上正确的依赖项，让Redux值变化时能自动触发本地状态同步：

   const diaryData = useSelector(({diaryState}) => diaryState.data);
   const diaryIndex = useSelector(({diaryState}) => diaryState.index);
   
   // 加可选判空，避免初始值不存在时报错
   const [diary, setDiary] = useState(diaryData?.[diaryIndex]);
   
   useEffect(() => {
     // 防御性判断，避免状态未初始化时取值报错
     if (!diaryData || diaryIndex === undefined) return;
     setLoad(true);
     setDiary(diaryData[diaryIndex]);
     setLoad(false);
   // 把Redux取值作为effect依赖，值变化时自动执行同步
   }, [diaryData, diaryIndex]);
   

3. 优化建议：如果本地diary状态和Redux存储的值完全一致，没有额外的独立交互逻辑，可以直接删掉本地的useState，从useSelector直接取值，减少重复状态同步的维护成本。

内容的提问来源于stack exchange，提问作者Flávio Costa