Scribd
Upload
29 views

GlobalContext Api - Redux

The document describes the useNestedState hook which allows nested state management in React. It returns a state object, setters object to update nested state, and reset function. The useNestedState hook uses useState and memoization to track nested state updates efficiently. An example InventoryContext is created using useNestedState to manage nested inventory application state. The context is consumed via useInventoryContext hook and its setters can update nested state.

Uploaded by

mohsin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

GlobalContext Api - Redux

The document describes the useNestedState hook which allows nested state management in React. It returns a state object, setters object to update nested state, and reset function. The useNestedState hook uses useState and memoization to track nested state updates efficiently. An example InventoryContext is created using useNestedState to manage nested inventory application state. The context is consumed via useInventoryContext hook and its setters can update nested state.

Uploaded by

mohsin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

GlobalContext Api

useNestedState.tsx
import { useCallback , useMemo , useState } from "react" ;

type SettersFor < U > = {


[ K in keyof U ] : U [ K ] extends Array < infer T >
? { set : ( value : T [] | (( prev : T [] ) => T [])) => void } & Array < SettersFor < T >>
: U [ K ] extends object
? { set : ( value : U [ K ] | (( prev : U [ K ] ) => U [ K ])) => void } & SettersFor < U [ K ] >
: { set : ( value : U [ K ] | (( prev : U [ K ] ) => U [ K ])) => void };
};

type ReturnTypes < T > = [ T , SettersFor < T > & { set : ( value : T ) => void }, () => void ];

export const useNestedState = < T extends object > ( initialState : T ) => {


const [ state , setState ] = useState ( initialState );

const createSetter = useCallback (( path : string [] ) => {


return ( value : any ) => {
setState (( prevState ) => {
const newState = { ... prevState };
let currentLevel = newState ;

for ( let i = 0 ; i < path . length - 1 ; i ++ ) {


const key = path [ i ];
currentLevel [ key ] = { ... currentLevel [ key ] };
currentLevel = currentLevel [ key ];
}

const lastKey = path [ path . length - 1 ];


if ( typeof value === "function" ) {
currentLevel [ lastKey ] = value ( currentLevel [ lastKey ]);
} else {
currentLevel [ lastKey ] = value ;
}

return newState ;
});
};
}, []);

const generateSetters = useCallback (( obj : T , path : string [] = [] ) => {


const setters : any = {};
if ( ! obj ) return setters ;

Object . keys ( obj ). forEach (( key ) => {


const value = obj [ key ];
const currentPath = path . concat ([ key ]);
if ( Array . isArray ( value )) {
setters [ key ] = {
set : createSetter ( currentPath ),
};
} else if ( typeof value === "object" ) {
setters [ key ] = {
set : createSetter ( currentPath ),
... generateSetters ( value , currentPath ),
};
} else {
setters [ key ] = {
set : createSetter ( currentPath ),
};
}
});
setters . set = createSetter ( path );
return setters as SettersFor < T > ;
}, []);

const reset = useCallback (() => {


setState ( initialState );
}, [ initialState ]);

const setters = useMemo (() => generateSetters ( initialState ), [


initialState ,
generateSetters ,
]);

return [ state , setters , reset ] as ReturnTypes < T > ;


};
useInventoryContext.tsx
import React , { createContext , useContext , useMemo } from 'react' ;
import { SettersFor , useNestedState } from './useNestedState' ;

const initialState = {
viewDetails : {},
filter : {
topLevelInventoryItem : 'Operating Systems' ,
childLevelInventoryItem : 'Child Operating Systems' ,
isCaseSensitive : false ,
isMatchAll : true ,
crieteria : {
newItem : {} as any ,
added : [] as any
},
},
singleEdit : {
category : '' ,
open : false ,
}

};

type InventoryStateType = typeof initialState

type InventoryContextType = [
state : InventoryStateType ,
setters : SettersFor < InventoryStateType > ,
reset : () => void
];

const InventoryContext = createContext < InventoryContextType > ([


initialState ,
{} as SettersFor < InventoryStateType > ,
() => { },
]);

// Use it as wrapper for application


export const InventoryProvider : React . FC < { children : React . ReactNode } > = ( { children } )

const [ state , setters , reset ] = useNestedState ( initialState );

// Memoize the setters object to avoid unnecessary re-renders


const memoizedSetters = useMemo (() => setters , [ state ]);

return (
< InventoryContext . Provider value = {[ state , memoizedSetters , reset ]} >
{ children }
</ InventoryContext . Provider >
);
};

// Use where ever in the application


export const useIventoryContext = () => useContext ( InventoryContext );

App.jsx
import SideNavComponent from '@/components/GlobalComponents/GlobalSidenav' ;
import HeaderComponent from '@/components/GlobalComponents/GlobalTopnav' ;
import { QueryClient , QueryClientProvider } from "@tanstack/react-query" ;
import { ReactQueryDevtools } from "@tanstack/react-query-devtools" ;

const queryClient = new QueryClient ();


function ProviderWrapper ( props ) {

return (
< QueryClientProvider client = { queryClient } contextSharing = { true } >
< InventoryProvider >
< HeaderComponent />
< SideNavComponent />
{ props . children }
</ InventoryProvider >
< ReactQueryDevtools />
</ QueryClientProvider >
);
}

export default ProviderWrapper ;

Example usage of Context

const [state,setters] = useInventoryContext();


setters.p1.p2.set(values);
setters.pi.num.set(prev=>prev+1)

Next
Redux Easy

Last modified 2mo ago Was this page helpful?

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy