SolidJSS
SolidJSโ€ข3y agoโ€ข
3 replies
Lo | Building Dromo

Best Practice for ContextProvider - Store vs Signals

When making a context provider is it best practice to use a store 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);
}


OR
Was this page helpful?