Last active
March 16, 2023 14:32
-
-
Save abcdeepakr/a5cf04bee75a2629138c2ec4d559741f to your computer and use it in GitHub Desktop.
Use context hook in reactJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|_ | |
|_ | |
|_ 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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
</> | |
) | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment