TypesScript custom useReducer hook example

useCustomReducer - with const assertion

import React from "react";

const setOpen = (open: boolean) =>
  ({
    type: "SET_OPEN",
    payload: { open }
  } as const);

const setTitle = (title: string) =>
  ({
    type: "SET_TITLE",
    payload: { title }
  } as const);

type Action = ReturnType<typeof setOpen | typeof setTitle>;

const defaultState = {
  open: false,
  title: ""
};

type State = typeof defaultState;

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "SET_OPEN": {
      const { payload } = action;
      return {
        ...state,
        open: payload.open
      };
    }

    case "SET_TITLE": {
      const { payload } = action;
      return {
        ...state,
        title: payload.title
      };
    }

    default:
      return state;
  }
};

const useCustomReducer = (inititalState: State) => {
  const [state, dispatch] = React.useReducer(reducer, inititalState);
  return [state, dispatch];
};

useCustomReducer - without const assertions

import React from "react";


const SET_OPEN: string = "SET_OPEN";
const SET_TITLE: string = "SET_TITLE";

interface SetOpenAction {
  readonly type: typeof SET_OPEN;
  payload: {
    open: boolean;
  };
}

interface SetTitleAction {
  readonly type: typeof SET_TITLE;
  payload: {
    title: string;
  };
}

type Action = SetOpenAction | SetTitleAction;

const setOpen = (open: boolean): SetOpenAction => ({
  type: SET_OPEN,
  payload: { open }
});

const setTitle = (title: string): SetTitleAction => ({
  type: SET_TITLE,
  payload: { title }
});

interface State {
  open: boolean;
  title: string;
}

const defaultState: State = {
  open: false,
  title: ''
}

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case SET_OPEN: {
      const { payload } = action as SetOpenAction;
      return {
        ...state,
        open: payload.open
      };
    }

    case SET_TITLE: {
      const { payload } = action as SetTitleAction
      return {
        ...state,
        title: payload.title
      }
    }

    default:
      return state;
  }
};

const useCustomReducer = (inititalState: State) => {
  const [state, dispatch] = React.useReducer(reducer, inititalState)
  return [state, dispatch]
}