React context API

[gloriaJun]

I'm not sure it is the best practice or not. But it is the best of the present

• interface

  
  import React from 'react';

// A generic typescript interface to capture state based actions. export interface IStateAction { type: string; payload: any; }

export type IDispatch = React.Dispatch;

// Interface to define the basic props for the provider component export interface IStateProviderProps { children: React.ReactNode; }

- provider

```javascript
import React, { useReducer, useContext } from 'react';

import { IStateAction, IDispatch, IStateProviderProps } from 'interfaces';

interface IAppState {
  isInternalFlow: boolean;
}

// The default state
const initialState: IAppState = {
  isInternalFlow: false,
};

export enum appActionTypes {
  SET_INTERNAL_FLOW = 'SET_INTERNAL_FLOW',
}

function appReducer(state: IAppState, action: IStateAction): IAppState {
  const { type, payload } = action;

  switch (type) {
    case appActionTypes.SET_INTERNAL_FLOW: {
      return {
        ...state,
        isInternalFlow: payload,
      };
    }

    default:
      throw new Error('Unhandled action');
  }
}

const AppStateContext = React.createContext<IAppState>({} as IAppState);
const AppDispatchContext = React.createContext<IDispatch>(null as any);

export function AppProvider({ children }: IStateProviderProps): JSX.Element {
  const [state, dispatch] = useReducer(appReducer, initialState);

  return (
    <AppStateContext.Provider value={state}>
      <AppDispatchContext.Provider value={dispatch}>
        {children}
      </AppDispatchContext.Provider>
    </AppStateContext.Provider>
  );
}

export function useAppState(): IAppState {
  return useContext(AppStateContext);
}

export function useAppDispatch(): IDispatch {
  return useContext(AppDispatchContext);
}

Reference

• https://react.vlpt.us/using-typescript/04-ts-context.html