Redux状态首次更新失效问题求助

这个问题的核心原因很明确：你调用的sendPhoto是一个异步操作（需要和服务器交互完成照片上传），但你现在是同步执行dispatch(sendPhoto(...))后立刻调用dispatch(getPhotos())。这时候sendPhoto的上传请求还没完成，服务器里还没存入新照片，所以getPhotos拿到的还是旧数据，页面自然不会显示刚上传的照片；等第二次点击时，上一次的上传已经完成，getPhotos就能拿到上一次的照片，就出现了“延迟一步更新”的现象。

下面给你几种可行的解决办法：

方法一：等待上传完成后再获取照片 #

修改你的sendPhoto action，让它返回一个Promise（如果用的是Redux Thunk，异步action本身就可以返回Promise）：

export function sendPhoto(base64: string | undefined, location?: any) {
  return async (dispatch: Dispatch<PhotoActionTypes>) => {
    // 执行上传的异步请求，等待完成
    await ax().post('pictures/api/pictures/upload', { base64, location });
    // 这里可以选择直接在内部dispatch getPhotos，也可以让组件等待后再调用
  };
}

然后在组件的handleSendPhoto里等待上传完成后再调用getPhotos：

const handleSendPhoto = async (): void => {
  // 等待上传请求完成
  await dispatch(sendPhoto(image?.base64, location));
  // 此时服务器已经存入新照片，再获取最新列表
  dispatch(getPhotos());
};

方法二：上传完成后直接更新状态（更高效） #

如果你的后端在上传完成后，能返回更新后的完整照片列表，或者新上传的照片信息，那可以直接在sendPhoto里更新状态，省去一次额外的getPhotos请求：

export function sendPhoto(base64: string | undefined, location?: any) {
  return async (dispatch: Dispatch<PhotoActionTypes>, getState: () => RootState) => {
    const response = await ax().post('pictures/api/pictures/upload', { base64, location });
    
    // 情况1：后端返回完整的最新照片列表
    const updatedPhotos = response.data.updatedPictures;
    dispatch(setPhotos(updatedPhotos));

    // 情况2：后端只返回新上传的单张照片，我们可以在现有状态基础上添加
    // const newPhoto = response.data.newPicture;
    // const currentPhotos = getState().photos;
    // dispatch(setPhotos([...currentPhotos, newPhoto]));
  };
}

这时组件里的handleSendPhoto只需要调用上传action即可，不用再手动调用getPhotos：

const handleSendPhoto = (): void => {
  dispatch(sendPhoto(image?.base64, location));
};

额外检查点 #

确认你的reducer里SET_PHOTOS的逻辑是正确的，从你的代码看return {...state, photos};是符合Redux不可变更新原则的，这部分没问题。

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