Redux state结合搜索框筛选后删除输入无法恢复数据，如何跨组件共享筛选结果

你当前的实现直接用筛选后的结果覆盖了Redux中存储的原始员工全量列表，第一次筛选完成后原始数据就被销毁了，因此清空搜索框后也无法恢复全量数据展示。

同时你的代码存在一个隐藏bug：setSearchField是React的异步状态更新，调用后立刻取searchField拿到的是更新前的旧值，会导致筛选结果和输入内容不同步。

筛选逻辑属于数据转换操作，不需要存储在Redux状态中，直接基于原始全量数据和搜索关键词派生即可，无需修改原始员工列表，也避免了数据冗余。

改造步骤 #

1. 在employeeSlice中新增搜索关键词存储字段，不要修改原始员工列表

// employeeSlice.js
import { createSelector } from '@reduxjs/toolkit'

const initialState = {
  employeeList: [], // 原始全量员工列表，仅在拉取数据时更新，永不修改
  searchKeyword: "" // 新增字段存储搜索关键词
}

// 修改listFiltered action，仅更新搜索关键词
export const employeeSlice = createSlice({
  name: 'employees',
  initialState,
  reducers: {
    listFiltered: (state, action) => {
      state.searchKeyword = action.payload
    },
    // 你的其他action，比如拉取员工列表的成功回调
    fetchEmployeesSuccess: (state, action) => {
      state.employeeList = action.payload
    }
  }
})

2. 新增memoized selector，统一计算筛选后的员工列表，所有需要用到筛选结果的组件都可以直接调用这个selector

// 写在employeeSlice.js中即可
const selectEmployeeList = state => state.employees.employeeList
const selectSearchKeyword = state => state.employees.searchKeyword

export const selectFilteredEmployees = createSelector(
  [selectEmployeeList, selectSearchKeyword],
  (list, keyword) => list.filter(item => item.fname.includes(keyword))
)

3. 修改header组件的搜索回调，修复异步取值bug

// header.js
const handleChange = (e) => {
  const inputVal = e.target.value
  setSearchField(inputVal)
  dispatch(listFiltered(inputVal)) // 直接传当前输入的值，不要用异步更新的searchField
}

4. 任意需要渲染筛选结果的组件，直接调用selector取数即可，不需要组件之间传值

// 列表组件示例
import { selectFilteredEmployees } from './employeeSlice'

const EmployeeList = () => {
  const filteredEmployees = useSelector(selectFilteredEmployees)
  // 直接渲染filteredEmployees即可
}

如果你不想使用selector，也可以在Redux中拆分存储字段，永远保留原始全量数据：

// employeeSlice.js initialState
const initialState = {
  originalList: [], // 原始全量数据，永不修改
  filteredList: [] // 存储筛选后的结果
}

// 拉取全量员工数据时同时初始化两个列表
fetchEmployeesSuccess: (state, action) => {
  state.originalList = action.payload
  state.filteredList = action.payload
}

// listFiltered reducer改为基于原始列表筛选
listFiltered: (state, action) => {
  state.filteredList = state.originalList.filter(item => item.fname.includes(action.payload))
}

所有组件需要渲染列表时取filteredList字段即可。

如果不想修改Redux结构，也可以把筛选逻辑提到两个组件的公共父组件中，或者用React Context把filtered结果共享给下游组件，但这种方式维护成本高于上述Redux改造方案。

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