React Native/Redux：如何过滤Redux Store数据？新手实操疑问

嘿，作为Redux新手能考虑到这些细节已经超棒了！尤其是你明确知道reducer里绝对不能修改原始数据这一点，完全抓住了Redux的核心原则，必须给你点个赞👍

先给你明确结论：当前场景下，在mapStateToProps里处理过滤是最优解 #

因为你只需要在单个组件里实现过滤功能，直接在mapStateToProps中处理是最直接、成本最低的方式，完全没必要引入reselect或者把逻辑放到action里。下面给你拆解具体实现要点和可能踩的坑：

1. 正确的实现方式（附示例） #

核心是把过滤逻辑写成纯函数（不修改原数据，只基于输入返回新结果），然后在mapStateToProps里调用这个函数，同时返回原始数据和过滤后的数据：

// 抽离独立的过滤纯函数，方便维护和测试
const filterListData = (originalList, filterKey) => {
  // 用filter返回新数组，绝对不能用splice这类修改原数组的方法！
  return originalList.filter(item => item.category === filterKey);
};

// 组件的mapStateToProps
const mapStateToProps = (state) => {
  // 假设原始数据存在state.items.list，过滤条件存在state.filters.activeCategory
  return {
    // 原数据直接返回，用于初始展示
    originalData: state.items.list,
    // 调用过滤函数得到结果
    filteredData: filterListData(state.items.list, state.filters.activeCategory)
  };
};

这样你的组件就能拿到两个数据集合，轻松实现“先展示原数据，再显示过滤结果”的需求。

2. 什么时候需要考虑在action里处理？ #

只有当你的过滤逻辑满足以下任一情况时，才需要把逻辑放到action（通常结合redux-thunk这类中间件）里：

• 过滤需要异步操作（比如要请求后端接口获取过滤参数，或者根据异步返回的结果过滤）
• 过滤结果需要缓存起来给多个组件复用
• 过滤逻辑计算成本极高（比如处理上万条数据的复杂筛选）
  对你当前的单一场景来说，完全没必要这么做，反而会增加代码复杂度。

3. 你可能没成功的常见原因 #

• 不小心修改了原state：比如用originalData.splice()、originalData.sort()这类会直接修改原数组的方法，一定要用filter、map、slice这类返回新数组的纯函数方法
• 过滤条件没正确关联：要确保你的过滤条件（比如输入框值、下拉选项）已经同步到Redux state里，或者作为组件props传入，否则mapStateToProps拿不到正确的条件去过滤
• 组件没触发重新渲染：如果修改过滤条件后组件没更新，检查下是否正确dispatch了action去更新state，或者mapStateToProps里是否正确依赖了过滤条件（比如有没有把过滤条件作为返回值的一部分，让Redux检测到变化）

关于reselect的小补充 #

虽然你现在只用一次，但如果之后过滤逻辑变复杂，或者多个组件需要用相同的过滤结果，reselect的缓存能力会帮你提升性能——它只会在依赖的state变化时重新计算过滤结果。不过当前场景下不用完全没问题，不用纠结～

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