为何在Redux Store中按收藏状态过滤数据无法生效？

• 核心逻辑错误：误用filter()方法特性
  JS数组的filter()是纯函数，不会修改原数组，只会返回符合判断条件的全新数组。你代码中调用newState.filter(...)但没有把返回值赋值给任何变量，属于无效操作，newState始终是原来的全量数组，自然打印不出过滤效果。
  举个直观示例：

  const arr = [1,2,3]
  arr.filter(item => item > 2)
  console.log(arr) // 输出仍然是[1,2,3]
  const filteredArr = arr.filter(item => item > 2)
  console.log(filteredArr) // 才会输出[3]
  

• 分支判断语法错误
  你写的else if ((action.payload = "noFilter"))是单等号的赋值操作，不是等值判断，这个条件永远为真，完全没法正确识别noFilter的分支逻辑，必须改成三等号的判断写法：action.payload === "noFilter"。
• 数据架构隐患
  直接拿state里存储的全量stats数组做过滤回写，没有单独留存原始数据。一旦过滤后的数组覆盖了原始stats，后续切回「不筛选」状态时，就拿不到完整的影片列表，会造成数据丢失。

推荐把「全量原始数据」和「筛选状态」分开存储，不要直接修改原始数组，从根源上避免数据丢失问题：

1. 调整state结构，单独留存全量影片数据，新增字段记录当前筛选规则：

   {
     allFilms: [], // 永久存放所有添加的影片，不做任何修改
     currentFilter: 'all', // 记录当前筛选状态，比如all/collect
     // 其他原有state字段
   }
   

2. 简化FILTER_FILM的reducer逻辑，只更新筛选状态，不直接操作原始数据：

   case "FILTER_FILM": {
     return {
       ...state,
       currentFilter: action.payload
     }
   }
   

3. 组件取数时，基于全量数据和当前筛选状态计算展示列表：

   // 通过selector获取可见的影片列表
   const visibleFilmList = useSelector(state => {
     if (state.currentFilter === 'collect') {
       // 直接接住filter的返回值，基于原始全量数组计算
       // 注意根据实际需求调整判断条件：要展示收藏影片就判断favourite为"true"，不要搞反逻辑
       return state.allFilms.filter(item => item[3].favourite === 'true')
     }
     return state.allFilms
   })
   

如果必须在reducer层计算过滤结果，一定要留存原始全量数据，并且接住filter的返回值：

case "FILTER_FILM": {
  const originalFilms = [...state.allFilms]
  let showList = originalFilms
  if (action.payload === 'filter') {
    // 必须把filter的返回值赋值给变量
    showList = originalFilms.filter(item => item[3].favourite === 'true')
  }
  return {
    ...state,
    stats: showList, // 展示用的列表存在stats字段
    allFilms: originalFilms // 原始数据永远保持完整
  }
}

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