redux-persist/integration/react PersistGate TypeScript Examples

Source File: index.tsx From OpenBA-NextGenTV with MIT License

7 votes

ReactDOM.render(
  <ErrorBoundaryWS>
    <StrictMode>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </StrictMode>
  </ErrorBoundaryWS>,
  document.getElementById('root')
);

Source File: _app.tsx From dh-web with GNU General Public License v3.0

6 votes

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>
    );
}

Source File: index.tsx From marina with MIT License

6 votes

// 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);

Source File: storage.tsx From reactant with MIT License

6 votes

provider = (props: PropsWithChildren<{}>) => {
    return (
      <PersistGate
        loading={this.options.loading || null}
        persistor={this.persistor!}
      >
        {props.children}
      </PersistGate>
    );
  };

Source File: providers.tsx From beancount-mobile with MIT License

6 votes

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>
  );
}

Source File: index.tsx From resume-builder with MIT License

6 votes

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 />
            </>
        );
    }

Source File: index.tsx From prompts-ai with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Source File: App.tsx From Covid19 with MIT License

6 votes

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>
  );
}

Source File: index.tsx From Pi-Tool with GNU General Public License v3.0

6 votes

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

Source File: App.tsx From jellyfin-audio-player with MIT License

6 votes

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>
    );
}

Source File: index.tsx From interbtc-ui with Apache License 2.0

6 votes

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')
);

Source File: index.tsx From react-native-woocommerce with MIT License

6 votes

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>
  );
}

Source File: AppWrapper.tsx From nyxo-app with GNU General Public License v3.0

6 votes

AppWrapper: FC = () => {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </ApolloProvider>
  )
}

Source File: App.tsx From BitcoinWalletMobile with MIT License

6 votes

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>
  );
}

Source File: App.tsx From tic-tac-toe-app with MIT License

6 votes

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>
    );
}

Source File: App.tsx From THUInfo with MIT License

6 votes

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>
)

Source File: App.tsx From GTAV-NativeDB with MIT License

6 votes

export default function App() {
  return (
    <StoreProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <OnlineStatusProvider>
          <BrowserRouter>
            <Theme>
              <CssBaseline />
              <NativeLoader />
              <LoadGate />
            </Theme>
          </BrowserRouter>
        </OnlineStatusProvider>
      </PersistGate>
    </StoreProvider>
  )
}

Source File: App.tsx From shadowsocks-electron with GNU General Public License v3.0

5 votes

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>
  );
}

Source File: _app.tsx From slice-machine with Apache License 2.0

5 votes

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>
    </>
  );
}

Source File: index.tsx From celo-web-wallet with MIT License

5 votes

ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  mountNode
)

Source File: index.tsx From majsoul-api with MIT License

5 votes

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]
);

redux-persist/integration/react#PersistGate TypeScript Examples