筛选条件useContext+ useReducer解决方案

import { useReducer } from 'react'

import { LeadsScene } from 'foreignTradePlatform/Leads/constants/constant'

import _ from 'lodash'

import { LEADS_STORE } from 'foreignTradePlatform/Leads/utils'
export const MY_LEADS_STATUS = {
	ALL_LEADS: '全部',
	WAITING_CONVERT: '待转化',
	CONVERTED: '已转化为客户',
}

export const OPEN_SEA_STATUS = {
	ALL_LEADS: '全部',
	WAITING_CONVERT: '待转化',
	CONVERTED: '已转化',
	INACTIVE: '已失效',
}
type LeadsTabType = keyof typeof MY_LEADS_STATUS
type OpenSeaLeadsTabType = keyof typeof OPEN_SEA_STATUS

type Pagination = {
	pageNo: number
	pageSize: number
}
type sortFiled = {
	field: string
	order: 'asc' | 'desc'
}

export type InitStateType = {
	scene: LeadsScene
	status: LeadsTabType | OpenSeaLeadsTabType
	// 模糊搜索
	// comprehensiveInfo: string
	// 高级搜索
	advancedFilter: any
	pagination: Pagination
	selectedRowKeys: string[]
	sortFields: sortFiled[]
}

export const InitState: InitStateType = {
	// xiangshangzhi: 'zidingyishuxing',
	scene: LeadsScene.MY_LEADS,
	status: 'ALL_LEADS',
	// comprehensiveInfo: '',
	advancedFilter: {},
	pagination: {
		pageNo: 1,
		pageSize: 20,
	},
	selectedRowKeys: [],
	sortFields: [],
}

const ActionTypes = {
	CHANGE_SENCE: 'CHANGE_SENCE',
	CHANGE_TAB: 'CHANGE_TAB',
	COMPREHENSIVE_SEARCH: 'COMPREHENSIVE_SEARCH',
	CHANGE_PAGINATION: 'CHANGE_PAGINATION',
	CHANGE_ROW_SELECTION: 'CHANGE_ROW_SELECTION',
	RESET: 'RESET',
	SORT: 'SORT',
}
export const CustomerListReducer = (state: any, action: Record<string, any>): any => {
	switch (action.type) {
		// 切换场景时重置tab
		case ActionTypes.CHANGE_SENCE:
			return {
				...InitState,
				scene: action.payload.scene,
				// comprehensiveInfo: state.comprehensiveInfo,
			}
		// 切换tab时重置页码
		case ActionTypes.CHANGE_TAB:
			return {
				...state,
				status: action.payload.status,
				pagination: {
					pageNo: 1,
					pageSize: 10,
				},
				selectedRowKeys: [],
			}
		// 分页
		case ActionTypes.CHANGE_PAGINATION:
			return {
				...state,
				pagination: action.payload.pagination,
				selectedRowKeys: [],
			}
		// 选择改变
		case ActionTypes.CHANGE_ROW_SELECTION:
			return {
				...state,
				selectedRowKeys: action.payload.value,
			}
		// 综合搜索
		case ActionTypes.COMPREHENSIVE_SEARCH:
			return {
				...state,
				// comprehensiveInfo: action.payload.comprehensiveInfo,
				advancedFilter: action.payload,

				pagination: {
					pageNo: 1,
					pageSize: 10,
				},
			}
		// 重置赋值
		case ActionTypes.RESET:
			return {
				...action.payload,
			}
		// 排序
		case ActionTypes.SORT:
			return {
				...state,
				sortFields: action.payload,
			}
		default:
			return { ...state }
	}
}

export type LeadsFuntions = {
	changeScene: (value: string) => void
	changeTab?: (value: string) => void
	changeRowSlection?: (value: string[]) => void
	changePagination?: (paginaton: Pagination) => void
	changeSearchParams?: (value: Record<string, any>) => void
	advancedFilter?: (value: string) => void
	resetFilters?: (value: any) => void
	sortByField?: (value: sortFiled[]) => void
}
export const useLeadsListReducer: () => [any, LeadsFuntions] = () => {
	const [state, dispatch] = useReducer(
		CustomerListReducer,
		_.isEmpty(LEADS_STORE.getFilters()) ? InitState : LEADS_STORE.getFilters(),
	)
	const leadsFuntions: LeadsFuntions = {
		changeScene: (val: string) => {
			dispatch({
				type: ActionTypes.CHANGE_SENCE,
				payload: {
					scene: val,
				},
			})
		},
		changeTab: (val: string) => {
			dispatch({
				type: ActionTypes.CHANGE_TAB,
				payload: {
					status: val,
				},
			})
		},
		changePagination: (val: Pagination) => {
			dispatch({
				type: ActionTypes.CHANGE_PAGINATION,
				payload: {
					pagination: val,
				},
			})
		},

		// 高级筛选
		changeSearchParams: (val: { [key: string]: string }) => {
			dispatch({
				type: ActionTypes.COMPREHENSIVE_SEARCH,
				payload: val,
			})
		},
		changeRowSlection: (val: string[]) => {
			dispatch({
				type: ActionTypes.CHANGE_ROW_SELECTION,
				payload: {
					value: val,
				},
			})
		},
		resetFilters: (filterData: any) => {
			dispatch({
				type: ActionTypes.RESET,
				payload: filterData,
			})
		},
		sortByField: (sortFiled: sortFiled[]) => {
			dispatch({
				type: ActionTypes.SORT,
				payload: sortFiled,
			})
		},
	}
	return [state, leadsFuntions]
}

export const StateContext = createContext<[InitStateType, LeadsFuntions]>([InitState, {} as LeadsFuntions])
export const useLeadsState = () => {
  const [state, leadsFuntions] = useContext(StateContext)
  return {
    state,
    leadsFuntions,
  }
}