React中更新共享Redux状态的正确方式

问题根因 #

冲突的核心是受控组件的prop同步逻辑缺乏变更判断：

• 当前实现中DetailTextArea接收到传入的text prop时，会无条件将prop值同步到组件内部维护的输入状态
• 第一个输入框的防抖请求完成、后端返回成功后，Redux会更新practiceInView的对应字段，整个对象引用变化会触发页面所有关联组件重渲染
• 重渲染过程中，哪怕第二个输入框对应的Redux字段没有发生任何变更，也会被重渲染传入的旧prop值覆盖掉用户已经输入、但尚未触发防抖提交的内部状态，造成内容丢失
• 此前直接将输入值绑定到Redux的卡顿问题，本质是每次按键都触发全局状态更新、连带全量重渲染，和本次状态覆盖的问题属于两套独立的优化方向，不需要为了优化性能牺牲交互正确性

落地实现方案 #

1. 修正组件的prop同步逻辑，阻断无意义的状态覆盖 #

给DetailTextArea增加来源值对比逻辑，只有当外部传入的text是后端确认同步过的新源值时，才同步到内部输入状态，重渲染带来的同值prop直接忽略：

import { useRef, useState, useEffect, memo } from 'react';

const DetailTextArea = memo(function DetailTextArea({ text, ...restProps }) {
  // 记录Redux侧已确认同步的基准值
  const syncedSourceRef = useRef(text);
  // 组件内部维护当前输入的草稿状态
  const [draftValue, setDraftValue] = useState(text);

  useEffect(() => {
    // 仅当prop值和记录的基准值不一致时，才判定为外部源更新
    if (text !== syncedSourceRef.current) {
      syncedSourceRef.current = text;
      setDraftValue(text);
    }
  }, [text]);

  // 原有输入、防抖触发dispatch的逻辑保持不变
  const handleChange = (e) => {
    setDraftValue(e.target.value);
    // 防抖触发dispatch的原有逻辑无需修改
  };

  return <textarea value={draftValue} onChange={handleChange} {...restProps} />;
});

2. 缩小状态更新的扩散范围 #

• 在Redux reducer中处理后端响应时，仅更新当前请求对应的目标字段，不要将完整的后端返回数据直接合并覆盖整个practiceInView对象，从源头减少状态变更的影响范围
• 父组件读取Redux状态时，对每个输入框需要的字段做独立选取，不要返回整个practiceInView对象作为prop传递，避免任意字段变更触发所有关联组件重渲染

3. 补充请求顺序校验，避免旧响应覆盖新输入 #

针对网络延迟较高的场景，可以给每个输入框的防抖请求加自增序号标记：

• 每次触发防抖请求时，在组件实例上记录当前最新的请求序号
• 后端响应返回时，先对比响应对应的请求序号和组件当前记录的最新序号，如果不匹配则直接丢弃该响应，不触发Redux更新，避免较早发起的慢请求返回时，覆盖用户已经输入的新内容

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