Redux Toolkit编辑后刷新异常：仅Projects切片失效求助

所有Redux切片采用相同实现逻辑，但仅Projects切片在编辑后出现数据异常：控制台先打印更新后的新对象，随后又变回旧对象。

相关代码 #

切片中的编辑动作 #

.addCase(
        editProject.fulfilled,
        (state: ProjectState, action: PayloadAction<Project>) => {
          state.all = state.all.map((project) => project._id === action.payload._id ? action.payload : project)
          state.isLoading = false;
          state.hasError = false;
        }
      )

ProjectShow组件 #

const ProjectsShow: React.FC = () => {
    const { projectLink } = useParams();
    const dispatch = useAppDispatch();
    const { isLoading, hasError, errMessage } = useAppSelector((state) => state.projects);
    useEffect(() => {
      dispatch(loadProjects());
    }, [dispatch]) ;
    
    const projects = useSelector(selectAllProjects);
   
   
    if(isLoading) {
      return (
        <Loading />
      )
    } 
    if(hasError) {
      return <Error message={errMessage!} />;
    }
    const project = projects.find(({ subpageLink }) => subpageLink === projectLink);
    console.log(project)
    return (
        <div className="row">
            <div className="col-lg-12">
                <Project project={project!} />
            </div>
        </div>
    )
}

控制台日志截图 #

排查与解决思路 #

1. 检查是否重复触发数据加载 #

最可能的原因是编辑完成后意外触发了loadProjects，导致重新拉取旧数据覆盖了编辑后的状态：

• 核查编辑流程：比如编辑按钮的点击逻辑、editProject.fulfilled的回调函数里，是否有额外调用loadProjects的代码。
• 优化组件的加载逻辑：当前useEffect仅依赖dispatch，会在组件挂载时加载一次，但如果编辑后组件重新渲染（比如路由参数变化、父组件更新），是否会导致重复加载？如果不需要在组件更新时重新加载，保持当前依赖即可；如果需要根据projectLink加载对应项目，应将projectLink加入依赖数组：

  useEffect(() => {
    dispatch(loadProjects());
  }, [dispatch, projectLink]);
  

  注意：正常编辑流程下，完成后不需要重新加载全部项目，应该直接使用编辑接口返回的更新数据。

2. 确认状态更新的不可变性 #

虽然代码中使用map生成了新数组，但要确保action.payload是全新的对象，没有和旧状态中的对象共享引用：

• 可以在editProject.fulfilled中对返回数据做深拷贝，比如：

  const updatedProject = JSON.parse(JSON.stringify(action.payload));
  state.all = state.all.map(project => project._id === updatedProject._id ? updatedProject : project);
  

  （如果使用Immer管理状态，这一步可以省略，但直接修改状态时需确保不可变性）

3. 检查Selector的正确性 #

确认selectAllProjects这个selector没有返回旧的状态引用，正确的selector应该是直接返回状态中的数组：

export const selectAllProjects = (state) => state.projects.all;

避免在selector中做不必要的对象转换，导致引用异常。

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