React Native中如何在登录后保留未登录时的收藏状态？

核心思路 #

在用户未登录点击收藏时，先把要执行的操作（添加/移除）暂存到Redux状态中，等登录成功后自动读取并执行该操作，最后清理暂存状态。

步骤1：添加Redux暂存状态 #

创建一个专门的slice来存储待执行的收藏操作：

// features/wishlist/wishlistPendingSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  pendingAction: null, // 结构：{ idProduct: string, actionType: 'add' | 'remove' }
};

const wishlistPendingSlice = createSlice({
  name: 'wishlistPending',
  initialState,
  reducers: {
    setPendingWishlistAction: (state, action) => {
      state.pendingAction = action.payload;
    },
    clearPendingWishlistAction: (state) => {
      state.pendingAction = null;
    },
  },
});

export const { setPendingWishlistAction, clearPendingWishlistAction } = wishlistPendingSlice.actions;
export default wishlistPendingSlice.reducer;

记得把这个reducer注册到你的Redux Store中。

步骤2：修改收藏按钮的点击逻辑 #

当用户未登录时，不再直接跳转登录，而是先暂存操作类型再跳转：

const addRemoveWishlistItem = async (idProduct: string) => {
  if (!userLogged) {
    // 判断当前要执行的是添加还是移除收藏
    const actionType = favoriteId.includes(idProduct) ? 'remove' : 'add';
    // 把操作存到Redux
    store.dispatch(setPendingWishlistAction({ idProduct, actionType }));
    return navigation.navigate('/login');
  }

  const isServiceLoading =
    removeWishlistItemQuery.isLoading || addWishlistItemQuery.isLoading;

  if (!idWishlist || isServiceLoading) return;

  if (favoriteId.includes(idProduct)) {
    store.dispatch(UpdateLastFavoriteAdded(null));
    return removeWishlistItemQuery.mutate(idProduct);
  }

  store.dispatch(UpdateLastFavoriteAdded(idProduct));
  return addWishlistItemQuery.mutate(idProduct);
};

const handleDeleteAllFavorites = async () => {
  return removeAllWishlistItemsQuery.mutate();
};

步骤3：登录成功后自动执行暂存操作 #

在登录页面的登录成功回调中，读取暂存的操作并执行：

// 登录组件中的登录成功处理逻辑
const handleLoginSuccess = async () => {
  // 先完成登录基础逻辑：获取用户信息、拉取用户已有的收藏列表
  await fetchUserProfile();
  await fetchUserWishlist(); // 确保favoriteId状态是最新的

  // 读取Redux中的待执行操作
  const pendingAction = store.getState().wishlistPending.pendingAction;
  if (!pendingAction) {
    navigation.goBack();
    return;
  }

  const { idProduct, actionType } = pendingAction;
  // 执行对应的收藏操作，加一层判断避免重复请求
  if (actionType === 'add') {
    if (!favoriteId.includes(idProduct)) {
      store.dispatch(UpdateLastFavoriteAdded(idProduct));
      await addWishlistItemQuery.mutateAsync(idProduct);
    }
  } else {
    if (favoriteId.includes(idProduct)) {
      store.dispatch(UpdateLastFavoriteAdded(null));
      await removeWishlistItemQuery.mutateAsync(idProduct);
    }
  }

  // 清空暂存的操作状态
  store.dispatch(clearPendingWishlistAction());
  // 跳转回商品列表页面
  navigation.goBack();
};

关键注意点 #

• 登录后必须先拉取用户的收藏列表，保证本地favoriteId状态与后端同步，避免重复操作
• 使用mutateAsync而非mutate，确保操作完成后再清理暂存状态，防止状态不一致
• 执行操作前加判断，避免向后端发送无效请求

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