Level: Intermediate⚛️; Scroll to bottom for full code⬇️
Pen and Paper
The implementation is simple, I think many blogs have been written about the same method; I think this needed to be written. We will be using react context for universal state management.
- Create a wrapper component
- use
React.createContextto create state context - create new app state using
useReducer() - create a method in reducer function to add / update state
Implementation
Create wrapper
export const StateManager = ({children}) => {
return (
)
}
Creating context
export const store = React.createContext({})
Creating state in wrapper
// store context
export const store = React.createContext({})
const {Provider} = store
export const StateManager = ({children}) => {
// creating state
const [state, dispatch] = React.useReducer(reducer, {})
return (
<Provider value={{state, dispatch}}>
{children}
</Provider>
)
}
Implementing reducer
const reducer = (state, action) => {
const {type, payload} = action
switch (type){
case "ADD":
return {...state, ...payload}
default:
return state;
}
}
One thing to be noted is that, the payload given must be an object containing app data
Usage
import {useContext} from "react"
import {store, StateManager} from "./StateManager.js"
function App(){
return (
<StateManager><ChildComp /></StateManager>
)
}
function ChildComp(){
const {state, dispatch} = useContext(store)
// work with app state
return (
<div></div>
)
}
References
How to use useReducer ?
How to use react context ?
Whole Code
// StateManager.js
import React from "react"
// reducer function
const reducer = (state, action) => {
const {type, payload} = action
switch (type){
case "ADD":
return {...state, ...payload}
default:
return state;
}
}
// store context
export const store = React.createContext({})
const {Provider} = store
export const StateManager = ({children}) => {
// creating state
const [state, dispatch] = React.useReducer(reducer, {})
return (
<Provider value={{state, dispatch}}>
{children}
</Provider>
)
}
Top comments (0)