reactjs - React Context API med Typescript Generisk

type ContextProps<T = object> = {
  store: T,
  updateStore: React.Dispatch<T>
};

export default React.createContext<Partial<ContextProps>>({}); // is there any way to pass the generic? so store can correct type

export function Provider<T, K>(props: T & { store: K }) {
  const [globalState, updateStore] = React.useState(props.store);
  const value = React.useMemo(
    () => ({
      store: globalState,
      updateStore,
    }),
    [globalState],
  );

  return <StateMachineContext.Provider value={value} {...props} />;
}

Finnes det noen måte å sende generisk inn i Context på, slik at value kan ha riktig type?

Svar #1

send typen når du oppretter konteksten, husk å opprette den utenfor komponentene.

type ContextProps<T = object> = {
  store: T,
  updateStore: React.Dispatch<T>
};

function createGenericContext<T extends object> () {
  return React.createContext<Partial<ContextProps<T>>>({}); 
}

const StateMachineContext = createGenericContext<{type: 'a'}>();
// or just
const StateMachineContext = React.createContext<Partial<ContextProps<{type: 'a'}>>>({});

export function Provider<T, K>(props: T & { store: K }) {
  const [globalState, updateStore] = React.useState(props.store);
  const value = React.useMemo(
    () => ({
      store: globalState,
      updateStore,
    }),
    [globalState],
  );

  return <StateMachineContext.Provider value={value} {...props} />;
}

Relaterte artikler