重复数据删除React Reducer内容

Question

我有一些类似的reducers，接收相同的操作，我如何删除以下代码的重复数据？

 const gridApiReducer = (state: GridApi, action: { type: string; value: GridApi }) => {
    switch (action.type) {
        case "UPDATE":
            return action.value;
        default:
            return state;
    }
};

const columnApiReducer = (state: ColumnApi, action: { type: string; value: ColumnApi}) => {
    switch (action.type) {
        case "UPDATE":
            return action.value;
        default:
            return state;
    }
};

const [gridApi, setGridApiByDispatch] = useReducer(gridApiReducer, {} as GridApi);
const [columnApi, setColumnApiByDispatch] = useReducer(columnApiReducer, {} as ColumnApi);

Answer 1

将reducer定义为generic函数：

const apiReducer = <Api extends GridApi | ColumnApi>(
  state: Api, action: { type: string; value: Api },
) => {
  switch (action.type) {
    case 'UPDATE':
      return action.value;
    default:
      return state;
  }
};

const [gridApi, setGridApiByDispatch] = useReducer(apiReducer, {} as GridApi);
const [columnApi, setColumnApiByDispatch] = useReducer(apiReducer, {} as ColumnApi);

Answer 2

+1对于上面的响应，您正在寻找通用的TS函数：

const createReducer = <T extends object>()=> {
  return (state: T, action: { type: string, value: T } ): T => {
    switch (action.type) {
      case "UPDATE":
        return action.value;
      default:
        return state;
    }
  };
}

const gridApiReducer = createReducer<GridApi>();
const columnApiReducer = createReducer<ColumnApi>();