reactjs - 去重 React Reducer 内容

Question

我有一些相似的减速器，接收相同的操作，我怎样才能对下面的代码进行重复数据删除？

 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);

标签： reactjstypescriptuse-reducer

Answer 1

将 reducer 定义为通用函数：

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);