Use context hook in reactJS

AppReducer.js

// create a simple nextjs project

// Two initial states, you can have as many and import as required
export const counterState = 0;
export const sentenceState = "";

// reducer that takes the state and the action paylod that determines which state to update

export const reducer = (state, action) => { // expects a current state and action to be worked on
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "UPDATESENTENCE":
      return state = action.payload
    case "CLEAR":
      return sentenceState
    case "RESET":
      return counterState;
    default:
      return state;
  }
}

file_structure.txt

|_
|_
|_ components
  |_ ContextAPI
    |_ AppReducer.js  // exports intialstate and a reducer( switch functions)
  |_ SubComponentA // * uses the useContext API
  |_ SubComponentB
  |_ SubComponentC
|_ rootFile.js /* useReducer & createContext are used here and Subcomponents are imported here */

Level1.jsx

import React, { useContext } from 'react'

// Importing the context that was created on root
import { AppContext } from '../pages/index'

// Importing the Level2 component that stores the button that increments the value, but displaying the value change on the parent component
// basically, => child updating a value, parent showing the value with the help of global context

import Level2 from './Level2'
function Level1() {
  const context = useContext(AppContext)
  function updateState(event) {
    context.sentenceDispatcher({ type: "UPDATESENTENCE", payload: event.target.value })
  }
  
  return (
    <>
      <input
        onChange={(e) => updateState(e)} />
      <h1>sentence value: {context.sentence}</h1>
      <h1>count value: {context.count}</h1>
      <Level2 />
    </>
  )
}

export default Level1

Level2.jsx

// The button defined in this component will update a value that will be reflected in the parent component
// without proper state management, we would have had to call functions via props to do the same, which is mess

import React, { useContext } from 'react'

// Same appcontext being imported here
import { AppContext } from '../pages/index'
function Level2() {
  const context = useContext(AppContext)
  function increment() {
    context.countDispatch({ type: "INCREMENT" })
  }
  
  return (
    <>
      <button onClick={() => increment()}>Increment</button>
      <h1>Level 2 count value : {context.count}</h1>
    </>
  )
}

export default Level2

rootFile.jsx

import React, { createContext, useReducer } from 'react'
import { reducer, counterState, sentenceState } from "../components/ContextAPI/AppReducer";

import Level1 from '../components/Level1'

// this AppContext is imported insubsequent children to access the global state
export const AppContext = createContext(); // AppContext is the name of the new context


export default function Home() {
  const [counter, countDispatch] = useReducer(reducer, counterState);
  const [sentence, sentenceDispatcher] = useReducer(reducer, sentenceState);
  return (
    <>
    {/* the appcontext provider gives access to all the child components*/}
    {/* The value attribute consists the state and the dispatcher function.
        The state holds the value of the curretGlobalState against the imported state from AppReducer/js file
        The dispatcher is used to trigger global state updates
    */}
      <AppContext.Provider
        value={{ count: counter, countDispatch: countDispatch, sentence: sentence, sentenceDispatcher: sentenceDispatcher }} >
        <Level1 />
      </AppContext.Provider>
    </>
  )
}