StoreProvider() — react Function Reference

Architecture documentation for the StoreProvider() function in StoreContext.tsx from the react codebase.

Function tsx PlaygroundApp Stores

Entity Profile

PlaygroundApp→ Stores→ StoreProvider() — react Function Reference

Dependency Diagram

graph TD
  acb0e031_8775_c868_9b2b_5978b2651a1c["StoreProvider()"]
  73168655_c854_d3d1_50a0_b37f865f3c7e["StoreContext.tsx"]
  acb0e031_8775_c868_9b2b_5978b2651a1c -->|defined in| 73168655_c854_d3d1_50a0_b37f865f3c7e
  style acb0e031_8775_c868_9b2b_5978b2651a1c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/StoreContext.tsx lines 35–64

export function StoreProvider({children}: {children: ReactNode}): JSX.Element {
  const [store, dispatch] = useReducer(storeReducer, emptyStore);
  const [isPageReady, setIsPageReady] = useState<boolean>(false);

  useEffect(() => {
    let mountStore: Store;
    try {
      mountStore = initStoreFromUrlOrLocalStorage();
    } catch (e) {
      console.error('Failed to initialize store from URL or local storage', e);
      mountStore = defaultStore;
    }
    dispatch({type: 'setStore', payload: {store: mountStore}});
    setIsPageReady(true);
  }, []);

  useEffect(() => {
    if (store !== emptyStore) {
      saveStore(store);
    }
  }, [store]);

  return (
    <StoreContext.Provider value={store}>
      <StoreDispatchContext.Provider value={dispatch}>
        {isPageReady ? children : null}
      </StoreDispatchContext.Provider>
    </StoreContext.Provider>
  );
}