How to perform state management using reducer and react context?

Q: How to perform state management using reducer and react context?

A initial state object A reducer function. Reducers let you consolidate a component’s state update logic. A context provider initialised with state and dispatch function created using useReducer hook A function exporting useContext import { createContext, useContext, useReducer } from 'react'; const globalContext= createContext(); const initialState = {isVisible:false }; // updates data in the context // reducer function for the useReducer hook const reducer = (state, action) => { switch (action.type) { case 'SHOW_POPUP': return { ...state, isVisible: true, }; case 'CLOSE_POPUP': return { ...initialState, }; default: return state; } }; // will be used to wrap a compoenent tree // passes export function GlobalContextProvider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); return ( {children} ); } export function useGlobalContext() { return useContext(globalContext); } export default globalContext;

Difficulty: 5/10

useReducer, Context API, state sharing

Our requirement is:

1
A initial state object
2
A reducer function. Reducers let you consolidate a component’s state update logic.
3
A context provider initialised with state and dispatch function created using useReducer hook
4
A function exporting useContext

javascript

How to perform state management using reducer and react context?

Difficulty: 5/10

useReducer, Context API, state sharing

Our requirement is:

1
A initial state object
2
A reducer function. Reducers let you consolidate a component’s state update logic.
3
A context provider initialised with state and dispatch function created using useReducer hook
4
A function exporting useContext

javascript

How to perform state management using reducer and react context?

How to perform state management using reducer and react context?

Scenario Questions

Follow-up Questions