如何在Redux/Context Store中存储商品点赞状态而非组件内处理？

嘿，我来帮你梳理下这个问题的优化方案～先看看你当前代码里的几个小问题：

1. 组件内的useEffect依赖是空数组，当savedList更新时（比如点赞/取消点赞后），不会重新计算isLiked，导致页面状态和Store不同步；
2. find方法的回调里反复调用setIsLiked，如果savedList里有多个不匹配的项，最后会把isLiked错误地设为false，哪怕前面有匹配的项。

下面是调整后的完整解决方案：

1. 组件内直接计算点赞状态（无需额外维护useState） #

不用在组件里单独存isLiked状态，直接从Context的savedList中判断当前商品是否已点赞，这样能保证状态始终和Store同步：

const SearchResult = ({ searchResult }) => {
  const { state: { savedList }, dispatch } = useContext(SearchContext);
  
  // 直接计算当前商品是否在已点赞列表中
  const isLiked = savedList.some(item => item._id === searchResult._id);

  // 触发点赞/取消点赞的函数
  const handleLike = async () => {
    await like(dispatch)(searchResult);
  };

  return (
    <div>
      <h3>{searchResult.name}</h3>
      <button onClick={handleLike}>{isLiked ? '取消点赞' : '点赞'}</button>
    </div>
  );
};

2. 修正Reducer的状态更新逻辑 #

当前Reducer的LIKE_SUCCESS直接覆盖savedlist，但点赞应该是切换状态（已点赞则移除，未点赞则添加），所以需要根据当前savedList做判断：

const likeReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_SAVED_ITEMS_SUCCESS':
      return {
        ...state,
        isFetching: false,
        savedList: action.payload // 注意统一变量名，你之前写的是savedlist（小写l），要保持一致哦
      };
    case 'LIKE_REQUEST':
      return {
        ...state,
        isFetching: true,
        error: null
      };
    case 'LIKE_SUCCESS':
      const targetProduct = action.payload;
      // 判断商品是否已在点赞列表中
      const isAlreadyLiked = state.savedList.some(item => item._id === targetProduct._id);
      
      if (isAlreadyLiked) {
        // 取消点赞：从列表中移除该商品
        return {
          ...state,
          isFetching: false,
          savedList: state.savedList.filter(item => item._id !== targetProduct._id)
        };
      } else {
        // 添加点赞：把商品加入列表
        return {
          ...state,
          isFetching: false,
          savedList: [...state.savedList, targetProduct]
        };
      }
    case 'LIKE_ERROR':
      return {
        ...state,
        isFetching: false,
        error: action.payload
      };
    default:
      return state;
  }
};

3. 完善Action的逻辑 #

当前Action里缺少加载状态的处理，而且要确保后端交互后的状态更新符合预期：

const like = (dispatch) => async (product) => {
  dispatch({ type: 'LIKE_REQUEST' }); // 触发加载状态
  try {
    // 假设API.like返回成功响应，或者返回更新后的点赞列表
    await API.like(product);
    // 如果后端返回完整的savedList，就传response.data；否则传当前product即可
    dispatch({ type: 'LIKE_SUCCESS', payload: product });
  } catch (error) {
    dispatch({ type: 'LIKE_ERROR', payload: error.message });
  }
};

核心思路总结 #

• 保持后端返回的商品数据纯净，在Store中单独维护一个savedList（已点赞商品集合）；
• 组件内通过savedList直接计算点赞状态，避免局部状态和Store不同步的问题；
• 点赞/取消点赞本质是对savedList进行添加/移除操作，保证Store作为单一数据源的可靠性。

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