redux-persist/integration/react#PersistGate TypeScript Examples

The following examples show how to use redux-persist/integration/react#PersistGate. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From OpenBA-NextGenTV with MIT License 7 votes vote down vote up 
ReactDOM.render(
  <ErrorBoundaryWS>
    <StrictMode>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </StrictMode>
  </ErrorBoundaryWS>,
  document.getElementById('root')
);
Example #2
Source File: _app.tsx    From dh-web with GNU General Public License v3.0 6 votes vote down vote up 
App: FC<AppProps> = ({ Component, pageProps }: AppProps) => {

    return (
        <React.StrictMode>
            <Provider store={store}>
                <PersistGate loading={undefined} persistor={persistor}>
                    <Shell>
                        <Component {...pageProps} />
                    </Shell>
                </PersistGate>
            </Provider>
        </React.StrictMode>
    );
}
Example #3
Source File: index.tsx    From marina with MIT License 6 votes vote down vote up 
// proxy store

store
  .ready() // wait for proxy store to connect to background Marina store
  .then(() => {
    render(
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>,
      document.getElementById('root')
    );
  })
  .catch(console.error);
Example #4
Source File: storage.tsx    From reactant with MIT License 6 votes vote down vote up 
provider = (props: PropsWithChildren<{}>) => {
    return (
      <PersistGate
        loading={this.options.loading || null}
        persistor={this.persistor!}
      >
        {props.children}
      </PersistGate>
    );
  };
Example #5
Source File: providers.tsx    From beancount-mobile with MIT License 6 votes vote down vote up 
export function Providers({
  children,
}: {
  children: JSX.Element | Array<JSX.Element>;
}): JSX.Element {
  return (
    <Provider store={store}>
      <AntdThemeProviderContainer>
        <PersistGate persistor={persistor}>
          <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
        </PersistGate>
      </AntdThemeProviderContainer>
    </Provider>
  );
}
Example #6
Source File: index.tsx    From resume-builder with MIT License 6 votes vote down vote up 
render() {
        const { Component, pageProps } = this.props;
        return (
            <>
                <Head>
                    <title>wtfresume | free resume builder</title>
                    <meta name="description" content="A modern real time design and 100% free resume builder."></meta>
                </Head>
                <Provider store={appStore}>
                    <PersistGate loading={<Component {...pageProps} />} persistor={this.persistor}>
                        <ThemeProvider theme={theme}>
                            <Component {...pageProps} />
                        </ThemeProvider>
                    </PersistGate>
                </Provider>
                <ToastContainer />
            </>
        );
    }
Example #7
Source File: index.tsx    From prompts-ai with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #8
Source File: App.tsx    From Covid19 with MIT License 6 votes vote down vote up 
export default function App() {
  // make sure the splash screen doesn't auto hide
  // also remember `expo-splash-screen` is not supported by web
  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return (
    <ReduxProvider store={store}>
      <PersistGate loading={false} persistor={persister}>
        <MainApp />
      </PersistGate>
    </ReduxProvider>
  );
}
Example #9
Source File: index.tsx    From Pi-Tool with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);
Example #10
Source File: App.tsx    From jellyfin-audio-player with MIT License 6 votes vote down vote up 
export default function App(): JSX.Element {
    const colorScheme = useColorScheme();
    // const colorScheme = 'dark';
    const theme = themes[colorScheme || 'light'];

    useEffect(() => {
        async function setupTrackPlayer() {
            await TrackPlayer.setupPlayer();
            await TrackPlayer.updateOptions({
                capabilities: [
                    Capability.Play,
                    Capability.Pause,
                    Capability.SkipToNext,
                    Capability.SkipToPrevious,
                    Capability.Stop,
                    Capability.SeekTo,
                ],
                stopWithApp: true
            });
        }
        setupTrackPlayer();
    }, []);

    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistedStore}>
                <ColorSchemeContext.Provider value={theme}>
                    <NavigationContainer
                        theme={colorScheme === 'dark' ? DarkTheme : LightTheme}
                    >
                        <Routes />
                        <DownloadManager />
                    </NavigationContainer>
                </ColorSchemeContext.Provider>
            </PersistGate>
        </Provider>
    );
}
Example #11
Source File: index.tsx    From interbtc-ui with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <App />
            </PersistGate>
          </Provider>
        </HelmetProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #12
Source File: index.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
export default function App(): JSX.Element {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{ flex: 1 }}>
          <Loading />
          <NavigationContainer>
            <NavigationStacks/>
          </NavigationContainer>
          <FlashMessage position="top" />
        </SafeAreaView>
      </PersistGate>
    </Provider>
  );
}
Example #13
Source File: AppWrapper.tsx    From nyxo-app with GNU General Public License v3.0 6 votes vote down vote up 
AppWrapper: FC = () => {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </ApolloProvider>
  )
}
Example #14
Source File: App.tsx    From BitcoinWalletMobile with MIT License 6 votes vote down vote up 
App = () => {

  useEffect(() => {
    SplashScreen.hide()
  }, [])

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer>
            <View style={{flex:1, backgroundColor:'#1A1E29'}}>
            <StatusBar backgroundColor="#090C14" barStyle="light-content"/>
                <Stack.Navigator mode="card" screenOptions={{...TransitionPresets.SlideFromRightIOS}} initialRouteName="Root" headerMode="none" >
                  <Stack.Screen name="Root" component={RootView} />
                  <Stack.Screen name="CreateStepOne" component={CreateStepOne} />
                  <Stack.Screen name="CreateStepTwo" component={CreateStepTwo} />
                  <Stack.Screen name="Restore" component={Restore} />
                  <Stack.Screen name="PickerView" component={PickerView} />
                  <Stack.Screen name="ScanQRCode" component={ScanQRCode} />
                  <Stack.Screen name="Send" component={Send} />
                </Stack.Navigator>
                </View>
              </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}
Example #15
Source File: App.tsx    From tic-tac-toe-app with MIT License 6 votes vote down vote up 
App: React.FC = () => {
    useEffect(() => {
        if (Platform.OS !== 'web') {
            Sentry.init({
                dsn: SENTRY_DSN,
                enableInExpoDevelopment: false,
                debug: process.env.NODE_ENV === 'development' ? true : false,
            });

            Sentry.setRelease(Constants.manifest.revisionId);
        }
    }, []);

    const { store, persistor } = stores();
    return (
        <Provider store={store}>
            <PersistGate loading={<AppLoading />} persistor={persistor}>
                <View style={{ flex: 1 }}>
                    <StatusBar barStyle="light-content" />
                    {Platform.OS === 'web' ? (
                        <AppNavigatorWeb />
                    ) : (
                        <AppNavigator />
                    )}
                </View>
            </PersistGate>
        </Provider>
    );
}
Example #16
Source File: App.tsx    From THUInfo with MIT License 6 votes vote down vote up 
App = () => (
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<NavigationContainer
				theme={{
					...DefaultTheme,
					colors: {
						...DefaultTheme.colors,
						text: themes(useColorScheme()).colors.text,
						background: themes(useColorScheme()).colors.themeBackground,
						card: themes(useColorScheme()).colors.themeBackground,
						border:
							useColorScheme() === "dark"
								? "white"
								: DefaultTheme.colors.border,
					},
				}}>
				<AuthFlow />
			</NavigationContainer>
		</PersistGate>
	</Provider>
)
Example #17
Source File: App.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <StoreProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <OnlineStatusProvider>
          <BrowserRouter>
            <Theme>
              <CssBaseline />
              <NativeLoader />
              <LoadGate />
            </Theme>
          </BrowserRouter>
        </OnlineStatusProvider>
      </PersistGate>
    </StoreProvider>
  )
}
Example #18
Source File: App.tsx    From shadowsocks-electron with GNU General Public License v3.0 5 votes vote down vote up 
App: React.FC = () => {
  const styles = useStyles();
  const darkMode = persistStore.get('darkMode') === 'true';
  const [theme] = useTheme(darkMode ? 'dark' : 'light');

  useEffect(() => {
    getConnectionStatus((status) => {
      store.dispatch({
        type: SET_STATUS,
        key: "connected",
        value: status
      });
    });

    MessageChannel.invoke('main', 'service:desktop', {
      action: 'setLocale',
      params: getFirstLanguage(persistStore.get('lang') as string)
    });
  }, []);

  return (
    <Provider store={store}>
      <PersistGate loading={<Loading />} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <SnackbarProvider
            maxSnack={3}
            anchorOrigin={ {horizontal: 'center', vertical: 'top'} }
            autoHideDuration={2e3}
          >
            <HashRouter>
              <div className={styles.root}>
                <CssBaseline />
                <AppNav />
                <main className={styles.content}>
                  <div className={styles.toolbar} />
                  <RouterComp />
                </main>
              </div>
            </HashRouter>
          </SnackbarProvider>
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}
Example #19
Source File: _app.tsx    From slice-machine with Apache License 2.0 5 votes vote down vote up 
function MyApp({ Component, pageProps }: AppContext & AppInitialProps) {
  const [serverState, setServerState] = useState<ServerState | null>(null);
  const [smStore, setSMStore] = useState<{
    store: Store;
    persistor: Persistor;
  } | null>(null);

  useEffect(() => {
    async function getInitialState() {
      const { data: serverState } = await getState();
      setServerState(serverState);
    }
    void getInitialState();
  }, []);

  useEffect(() => {
    if (!serverState) {
      return;
    }

    const normalizedCustomTypes = normalizeFrontendCustomTypes(
      serverState.customTypes,
      serverState.remoteCustomTypes
    );

    const { store, persistor } = configureStore({
      environment: serverState.env,
      availableCustomTypes: {
        ...normalizedCustomTypes,
      },
      slices: {
        libraries: serverState.libraries,
        remoteSlices: serverState.remoteSlices,
      },
    });

    const state = store.getState();
    const tracking = getIsTrackingAvailable(state);
    const repoName = getRepoName(state);

    Tracker.get().initialize(
      process.env.NEXT_PUBLIC_SM_UI_SEGMENT_KEY ||
        "Ng5oKJHCGpSWplZ9ymB7Pu7rm0sTDeiG",
      repoName,
      tracking
    );

    setSMStore({ store, persistor });
  }, [serverState]);

  return (
    <>
      <Head>
        <title>SliceMachine</title>
      </Head>
      <ThemeProvider theme={theme}>
        <BaseStyles>
          <RemoveDarkMode>
            {!smStore || !serverState ? (
              <LoadingPage />
            ) : (
              <Provider store={smStore.store}>
                <ConnectedRouter>
                  <PersistGate loading={null} persistor={smStore.persistor}>
                    <SliceMachineApp>
                      <Component {...pageProps} />
                    </SliceMachineApp>
                  </PersistGate>
                </ConnectedRouter>
              </Provider>
            )}
          </RemoveDarkMode>
        </BaseStyles>
      </ThemeProvider>
    </>
  );
}
Example #20
Source File: index.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  mountNode
)
Example #21
Source File: index.tsx    From majsoul-api with MIT License 5 votes vote down vote up 
ReactDOM.render(
	<Provider store={store}>
		<PersistGate loading={null} persistor={persistor}>
			<BrowserRouter>
				<Container className={`${styles.feed} bg-dark px-5`}>
					<Container className={`${styles.feed} bg-primary px-3 pb-3`} style={{ display: "flex", flexDirection: "column" }}>
						<Row className="no-gutters">
							<Switch>
								<Route path="/rigging/google">
									<GoogleAuthReceiver />
								</Route>
								<Route path="/rigging">
									<RiggingLogin />
								</Route>
								<Route path="/youtube">
									<YouTube videoId="Ag7W4SSl3fc" opts={{ autoplay: 1 } as any}></YouTube>
								</Route>
								<Route path="/contests/:id/sessions">
									<ContestSessionsFromRoute />
								</Route>
								<Route path="/contests/:id">
									<ContestFromRoute />
								</Route>
								<Route path="/contests">
									<ContestList />
								</Route>
								<Route path="/">
									<LatestContestSummary />
								</Route>
							</Switch>
						</Row>
						<Row style={{ flex: "1" }}></Row>
						<Footer />
					</Container>
				</Container>
			</BrowserRouter>
		</PersistGate>
	</Provider>,
	document.getElementsByTagName("body")[0]
);