Redux Search Reducer问题：搜索后非匹配商品被移除，需保留全量数据

问题根源在于你当前的searchProduct reducer直接替换了Redux Store里的商品列表，导致原始商品数据被覆盖丢失，清空搜索词后无法恢复全部商品。下面是修正后的实现方案：

核心思路 #

把原始全部商品和搜索关键词分开存储，搜索操作只更新关键词，通过一个筛选函数动态计算要展示的商品，保证原始数据始终保存在Store中。

修改后的完整代码 #

import { createSlice } from "@reduxjs/toolkit";

export const productSlice = createSlice({
  name: 'products',
  // 重构初始状态，拆分原始数据和搜索状态
  initialState: {
    allProducts: [],
    searchQuery: ''
  },
  reducers: {
    addProduct: (state, action) => {
      // 向原始商品数组添加新商品
      state.allProducts.push(action.payload);
      console.log(state.allProducts);
    },
    deleteProduct: (state, action) => {
      // 从原始商品数组中删除指定商品
      state.allProducts = state.allProducts.filter(item => item.title !== action.payload);
    },
    searchProduct: (state, action) => {
      // 仅更新搜索关键词，不修改原始商品数据
      state.searchQuery = action.payload.trim();
    }
  }
})

export const {
  addProduct,
  deleteProduct,
  searchProduct
} = productSlice.actions;

// 定义筛选函数，动态返回要展示的商品
export const getDisplayProducts = (state) => {
  const { allProducts, searchQuery } = state.products;
  if (!searchQuery) {
    return allProducts;
  }
  return allProducts.filter(item => 
    item.title.toLowerCase().includes(searchQuery.toLowerCase())
  );
};

export default productSlice.reducer;

使用方式 #

• 组件中获取展示商品时，用useSelector(getDisplayProducts)替代直接读取state.products
• 触发搜索时，仍然调用searchProduct传入搜索词即可；清空搜索时传入空字符串

这样修改后，Redux Store始终保存着完整的商品列表，搜索只是根据关键词动态筛选展示内容，完全满足“搜索时展示匹配结果，未搜索时展示全部商品”的需求。

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