React Native Redux产品过滤问询：无需Action方法及Reducer处理

嘿，针对你提出的两个问题，我来逐一梳理解决方案：

A) 是否存在无需使用Action即可过滤数据并刷新UI的方法？ #

当然可以！这种方式适合过滤逻辑仅在当前组件使用、且不需要全局共享过滤结果的场景。核心思路是在组件层面维护选中的分类状态，基于Redux传入的原始完整数据实时过滤，不用修改Redux的全局状态。

举个类组件的实现例子：

// 组件内部状态，记录当前选中的分类ID
state = { selectedCategoryId: null };

filterProducts = (title = "A") => {
  const _categories = Object.values(this.props.categories);
  const selectedCategory = _categories.find(category => category.title === title);
  // 更新组件本地状态，触发UI重新渲染
  this.setState({ selectedCategoryId: selectedCategory.id });
};

render() {
  // 从Redux props获取原始的完整产品列表
  const { products } = this.props;
  const { selectedCategoryId } = this.state;
  
  // 实时过滤产品
  const filteredProducts = selectedCategoryId 
    ? products.filter(product => product.categoryId === selectedCategoryId)
    : products;

  // 用过滤后的产品列表渲染UI
  return (
    <FlatList
      data={filteredProducts}
      renderItem={({item}) => <ProductItem product={item} />}
    />
  );
}

这种方式的优势是：

• 无需修改Redux reducer和action，逻辑更轻量
• 过滤操作仅影响当前组件，不会污染全局状态
• 基于原始数据过滤，切换分类时不会丢失数据

B) 若必须使用Action过滤，如何在FILTER_PRODUCTS_BY_CATEGORY_ID中获取state.data并进行过滤？ #

如果需要全局共享过滤后的结果，那就要通过Action和Reducer来处理，但这里要注意一个关键问题：必须保留原始的产品数据，否则切换分类时会没有数据可过滤。

步骤1：调整Reducer的初始状态 #

把原始数据和过滤后的数据分开存储：

const initialState = {
  isFetching: false,
  rawData: {}, // 存储从服务器获取的原始分类+产品数据
  filteredData: {}, // 存储过滤后的结果
  error: null
};

步骤2：修改GET_INITIAL_PRODUCTS_DATA_RESULT的处理逻辑 #

初始加载数据时，同时初始化原始数据和过滤后的数据：

case GET_INITIAL_PRODUCTS_DATA_RESULT:
  return { 
    ...state, 
    isFetching: false, 
    rawData: action.result,
    filteredData: action.result // 初始状态下过滤后的数据等于原始数据
  };

步骤3：实现正确的过滤逻辑 #

修改FILTER_PRODUCTS_BY_CATEGORY_ID的处理，基于rawData进行过滤：

case FILTER_PRODUCTS_BY_CATEGORY_ID:
  const { rawData } = state;
  // 从原始数据中过滤出匹配分类ID的产品
  const filteredProducts = rawData.products?.filter(
    product => product.categoryId === action.categoryId
  ) || [];
  
  return {
    ...state,
    filteredData: {
      ...rawData, // 保留原始分类数据，只替换产品列表
      products: filteredProducts
    }
  };

步骤4：组件中使用过滤后的数据 #

确保组件从props.filteredData中获取数据来渲染UI，而不是原来的data。

这样处理后，每次过滤都是基于原始的服务器数据，不会出现切换分类时数据丢失的问题，同时过滤结果可以在全局组件中共享。

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