Using the useReducer Hook in React with TypeScript

// An enum with all the types of actions to use in our reducerenum CountActionKind {  INCREASE = 'INCREASE',  DECREASE = 'DECREASE',}// An interface for our actionsinterface CountAction {  type: CountActionKind;  payload: number;}// An interface for our stateinterface CountState {  count: number;}// Our reducer function that uses a switch statement to handle our actionsfunction counterReducer(state: CountState, action: CountAction) {  const { type, payload } = action;  switch (type) {    case CountActionKind.INCREASE:      return {        ...state,        value: state.count + payload,      };    case CountActionKind.DECREASE:      return {        ...state,        value: state.count - payload,      };    default:      return state;  }}// An example of using the `useReducer` hooks with our reducer function and an initial stateconst Counter: FunctionComponent = () => {  const [state, dispatch] = useReducer(counterReducer, { count: 0 });  return (    <div>      Count: {state.count}      {/* Calling our actions on button click */}      <button        onClick={() => dispatch({ type: CountActionKind.INCREASE, payload: 5 })}      >        -      </button>      <button onClick={() => dispatch({ type: CountActionKind.DECREASE, payload: 5 })}>+</button>    </div>  );};

// Interface for our stateinterface LoadingState {  loaded: boolean;  loading: boolean;  error: Error | null;}// The example component that use the `useReducer` hook with our stateconst LoadingComponent: FunctionComponent = () => {  /**    See here that we are using `newState: Partial<LoadingState>` in our reducer   so we can provide only the properties that are updated on our state   */  const [state, setState] = useReducer(    (state: LoadingState, newState: Partial<LoadingState>) => ({      ...state,      ...newState,    }),    {      loaded: false,      loading: false,      error: null,    }  );  useEffect(() => {    // And here we provide only properties that are updating on the state    setState({ loading: true });    setState({ loading: false, loaded: true });    setState({ loading: false, loaded: true, error: new Error() });  }, []);  if (state.loading) {    return <p>Loading</p>;  }  return <p>{state}</p>;};