React_筛选与分页_状态管理策略

• father::状态管理
• React

结论：当筛选、排序与分页互相关联时，集中到同一状态源更易维护；跨组件共享建议用 redux 或 zustand。

问题：将筛选与分页拆在两个 Hook，会产生依赖“胶水代码”（筛选变动需重置分页等），扩展排序后复杂度继续上升。

示例（集中到一个 reducer/切片）：

type State = { filters: { keyword: string; category: string }; sort: string; page: number; pageSize: number };
 
function reducer(state: State, action: any): State {
  switch (action.type) {
    case 'updateFilters':
      return { ...state, filters: { ...state.filters, ...action.payload }, page: 1 };
    case 'updateSort':
      return { ...state, sort: action.payload, page: 1 };
    case 'setPage':
      return { ...state, page: action.payload };
    default:
      return state;
  }
}

要点：将“联动规则”写进同一处（如 reducer），避免在组件中用多个 useEffect 互相重置，调试路径更短。