State Management using React Hooks Api

import { createContext, useContext } from "react";

const Store = createContext();

export const useStore = () => useContext(Store);

const reducer = (state, action) => {

    console.log(action);
    
    switch(action.type){
        ......
        ......
        default:
            {
                return state;
            }
    }
}

export const StoreProvider = ({ children }) => {

    const [state, dispatch] = useReducer(reducer, {});
    
    return (
        <Store.Provider value={[state, dispatch]}>
            {children}
        </Store.Provider>
    );
}

import { StoreProvider } from "path/to/store/provider";

function MyApp({ Component, pageProps }) {
  return (
    <StoreProvider>
      <Component {...pageProps} />
    </StoreProvider>
  );
}

export default MyApp

const [state, dispatch] = useStore();