Redux reducer筛选用户时切换激活/未激活状态无数据如何解决

你对问题的判断完全准确。当前写法每次筛选都会直接覆盖state.users，导致下一次执行筛选操作时，数据源已经是上一次过滤后的子集，自然会出现筛选结果为空的情况。

解决方案 #

调整state结构，拆分「原始完整用户数据源」和「视图渲染用的筛选后用户列表」两个字段，筛选逻辑永远基于原始数据源执行：

1. 首先修改初始化state的结构，新增allUsers字段存储完整原始数据：

const initialState = {
  // 新增字段：存储完整用户列表，仅在用户数据新增/删除/更新时修改，筛选操作不会改动该字段
  allUsers: [],
  // 原有字段：存储当前需要渲染到页面的筛选后用户列表
  users: [],
  // 其他原有state字段...
}

2. 修改获取用户列表的action处理逻辑，同时给两个字段赋值：

case 'FETCH_USERS_SUCCESS':
  return {
    ...state,
    allUsers: action.payload.users,
    // 初始默认展示全部用户，也可以根据需求默认走对应筛选逻辑
    users: action.payload.users
  }

3. 调整原有筛选逻辑的数据源为allUsers：

case 'ACTIVE_USER':
  return {
    ...state,
    users: state.allUsers.filter(user => user.active === 1)
  }
case 'UNACTIVE_USER':
  return {
    ...state,
    users: state.allUsers.filter(user => user.active === 0)
  }

额外补充 #

如果后续需要支持展示全部用户的需求，可以新增对应case：

case 'SHOW_ALL_USERS':
  return {
    ...state,
    users: state.allUsers
  }

如果业务中有修改用户激活状态、新增/删除用户的操作，记得同步更新allUsers字段，保证原始数据源和后台数据一致即可。

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