Best Practice for ContextProvider - Store vs Signals
When making a context provider is it best practice to use a
E.g
OR
storestore instead of several individual signals or does it not matter?E.g
interface Props {
children: JSX.Element;
}
export interface IGlobalStore {
carType: string;
modelYear: number;
warrentyNumber: number;
carColor: string[];
}
interface GlobalContextValues extends IGlobalStore {
setState: SetStoreFunction<IGlobalStore>
}
export const GlobalContext = createContext<GlobalContextValues>(
{
carType: '',
modelYear: 0,
warrentyNumber: 0,
carColor: [],
setState: () => {},
}
);
export function GlobalProvider(props: Props) {
const [state, setState] = createStore<IGlobalStore>({
carType: '',
modelYear: 0,
warrentyNumber: 0,
carColor: [],
});
let isCarMade = true;
const setCarBeingMade = (value: boolean) => {
isCarMade = value;
}
const context = {
// Global
get carType(){ return state.carType},
get modelYear(){ return state.modelYear},
get warrentyNumber(){ return state.warrentyNumber},
get carColor(){ return state.carColor},
setState,
get isCarMade() {
return isCarMade;
},
setCarBeingMade,
}
return (
<GlobalContext.Provider value={context}>
{props.children}
</GlobalContext.Provider>
);
}
export function useGlobalContext() {
return useContext(GlobalContext);
}interface Props {
children: JSX.Element;
}
export interface IGlobalStore {
carType: string;
modelYear: number;
warrentyNumber: number;
carColor: string[];
}
interface GlobalContextValues extends IGlobalStore {
setState: SetStoreFunction<IGlobalStore>
}
export const GlobalContext = createContext<GlobalContextValues>(
{
carType: '',
modelYear: 0,
warrentyNumber: 0,
carColor: [],
setState: () => {},
}
);
export function GlobalProvider(props: Props) {
const [state, setState] = createStore<IGlobalStore>({
carType: '',
modelYear: 0,
warrentyNumber: 0,
carColor: [],
});
let isCarMade = true;
const setCarBeingMade = (value: boolean) => {
isCarMade = value;
}
const context = {
// Global
get carType(){ return state.carType},
get modelYear(){ return state.modelYear},
get warrentyNumber(){ return state.warrentyNumber},
get carColor(){ return state.carColor},
setState,
get isCarMade() {
return isCarMade;
},
setCarBeingMade,
}
return (
<GlobalContext.Provider value={context}>
{props.children}
</GlobalContext.Provider>
);
}
export function useGlobalContext() {
return useContext(GlobalContext);
}OR
