如何将 generics 类型传递给 React Hooks useReducer

Question

I'm using React Hooks useReducer with Typescript. Then I'd like to pass type to useReducer. How can I pass type to Reducer Function, generics type.

interface ActionTypes {
 FETCH,
}

interface TestPayload<T> {
 list: T[];
}

interface State<T> {
 list: T[];
}

interface Action<T> {
 type: ActionTypes;
 payload: TestPayload<T>;
}

export const returnAnyListReducer = <T>(
  state: State<T>, action: Action<T>
  ): State<T> => {
  const { type, payload } = action;
    switch (type) {
      case ActionTypes.FETCH: {
        return ({
          ...state,
          list: payload.list,
        });
      }
    }
  }

And, component which uses this reducer is like this below.

 const initialState = {
  list: [],
 }

 const [state, dispatch] = useReducer(returnAnyListReducer, initialState)

I have no idea how to pass type, for example User interface or AdminUser interface to useReducer.

Answer 1

This will work:

const [state, dispatch] = useReducer<User>(returnAnyListReducer, initialState)