redux-persist/integration/react#PersistGate JavaScript 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.js    From Merch-Dropper-fe with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter history={history}>
      <PersistGate persistor={persistor}>
        <Auth0Provider
          domain={config.domain}
          client_id={config.clientId}
          redirect_uri={window.location.origin}
          audience={config.audience}
          onRedirectCallback={onRedirectCallback}
        >
          <App />
        </Auth0Provider>
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);
Example #2
Source File: index.js    From react-firebase-admin with MIT License 6 votes vote down vote up 
app = (
  <Provider store={store}>
    <LanguageWrapper>
      <PersistGate persistor={persistor}>
        <ReduxToastr
          newestOnTop={false}
          preventDuplicates
          position="bottom-right"
          getState={state => state.toastr}
          transitionIn="fadeIn"
          transitionOut="fadeOut"
          progressBar
          closeOnToastrClick
        />
        <Router />
      </PersistGate>
    </LanguageWrapper>
  </Provider>
)
Example #3
Source File: index.js    From Designer-Client with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store.store}>
    <PersistGate loading={null} persistor={store.persistor}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);
Example #4
Source File: _app.js    From amazon-next with MIT License 6 votes vote down vote up 
render() {
        const { Component, pageProps } = this.props;
        return (
            <>
                <Head>
                    <title> Amazon Next </title>
                </Head>
                <Provider store={store}>
                    <PersistGate persistor={persistor}>
                        <AnimatePresence exitBeforeEnter>
                            <Component {...pageProps} />
                        </AnimatePresence>
                    </PersistGate>
                </Provider>
            </>
        );
    }
Example #5
Source File: index.js    From web with GNU General Public License v3.0 6 votes vote down vote up 
Router = () => {
  const { store, persistor } = _store;

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider theme={materialTheme}>
          <GlobalStyle />
          <App />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}
Example #6
Source File: index.js    From hiring-channel-frontend with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={<Loading />} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #7
Source File: index.js    From react-electron-sqlite-boilerplate with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={<p>Loading</p>} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <Routes />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #8
Source File: index.js    From React-Native-Boilerplate with MIT License 6 votes vote down vote up 
AppStateProvider = (props) => {
  const { children } = props;
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {children}
      </PersistGate>
    </Provider>
  );
}
Example #9
Source File: index.js    From bonded-stablecoin-ui with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AppRouter />
      </PersistGate>
    </Provider>
  </>,
  document.getElementById("root")
);
Example #10
Source File: index.jsx    From React-Nest-Admin with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);
Example #11
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router hashType="slash">
          <ChakraProvider theme={theme}>
            <NavBar />
            <Box
              textAlign="center"
              fontSize="xl"
              height="calc(100vh - 64px)"
              width="90%"
              pt={16}
              ml={'auto'}
              mr={'auto'}
            >
              <Routes>
                <Route exact path="/" element={<Home />}></Route>
                <Route
                  exact
                  path="/product/add"
                  element={<ProductAddEdit />}
                ></Route>
                <Route
                  exact
                  path="/product/:id"
                  element={<ProductDetails />}
                ></Route>
                <Route exact path="/cart" element={<Cart />}></Route>
              </Routes>
            </Box>
          </ChakraProvider>
        </Router>
      </PersistGate>
    </Provider>
  );
}
Example #12
Source File: App.js    From designcode-app with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Navigator />
        </PersistGate>
      </Provider>
      <StatusBar barStyle="dark-content" />
    </ApolloProvider>
  );
}
Example #13
Source File: App.js    From geometry_3d with MIT License 6 votes vote down vote up 
export default function App() {
  console.disableYellowBox = true;
  return (
    <Provider store={globalStorage.store}>
      <PersistGate
        persistor={globalStorage.persistor}
        loading={<Spinner visible={true} />}
      >
        <StatusBar style="dark" translucent={true} />
        <View
          style={{
            flex: 1,
            marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
          }}
        >
          <AppNavigator />
        </View>
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </PersistGate>
    </Provider>
  );
}
Example #14
Source File: index.js    From use-shopping-cart with MIT License 6 votes vote down vote up 
export function CartProvider({ loading = null, children, ...props }) {
  const store = React.useMemo(() => createShoppingCartStore(props), [props])
  const persistor = persistStore(store)

  return (
    <Provider context={CartContext} store={store}>
      <PersistGate
        persistor={persistor}
        children={(bootstrapped) => {
          if (!bootstrapped) return loading
          return children
        }}
      />
    </Provider>
  )
}
Example #15
Source File: App.js    From UltimateApp with MIT License 6 votes vote down vote up 
App = (props) => {
  const linking = {
    prefixes: [Linking.makeUrl('/'), Constants.manifest.extra.firebaseUrlPrefix],
    config: {
      initialRouteName: 'HomePage',
      screens: {
        PlayImporterPage: 'customPlays/:uuid', // Legacy, keeping it because there are generated URL out there
        DrillImporterPage: 'custom/:source/:uuid', // source can be drill or play
        DrillPage: 'drills/:id',
      },
    },
  };

  return (
    <ReduxProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PaperProvider>
          <NavigationContainer
            linking={linking}
            fallback={<ActivityIndicator animating color={theme.MAIN_COLOR} style={{ top: '45%' }} size="large" />}
          >
            <Navigation />
          </NavigationContainer>
          <FlashMessage position="bottom" />
        </PaperProvider>
      </PersistGate>
    </ReduxProvider>
  );
}
Example #16
Source File: App.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
function App() {
    return (
        <div className="App">
            <Provider store={store}>
                <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
                    <BrowserRouter>
                        <Menu/>
                        <Switch>
                            <Route exact path='/'>
                                <Home/>
                            </Route>
                            <Route path='/boots'>
                                <Boots/>
                            </Route>
                        </Switch>
                        <Basket/>
                    </BrowserRouter>
                </PersistGate>
            </Provider>
        </div>
    );
}
Example #17
Source File: App.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <PersistGate
          loading={<div>Loading...</div>}
          persistor={persistor}
        >
          <BrowserRouter>
            <Menu />
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/boots">
                <Boots />
              </Route>
            </Switch>
            <Basket />
          </BrowserRouter>
        </PersistGate>
      </Provider>
    </div>
  )
}
Example #18
Source File: App.js    From react-native-hook-template with MIT License 6 votes vote down vote up 
render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <RootContainer />
        </PersistGate>
      </Provider>
    );
  }
Example #19
Source File: App.js    From duofolio with GNU General Public License v3.0 6 votes vote down vote up 
export default function App() {
	useEffect(() => {
		if (Text.defaultProps == null) Text.defaultProps = {};
		Text.defaultProps.allowFontScaling = false;
	}, []);

	return (
		<Provider store={store}>
			<PersistGate persistor={persistor}>
				<NavigationContainer>
					<Root />
				</NavigationContainer>
			</PersistGate>
		</Provider>
	);
}
Example #20
Source File: Router.jsx    From react-03.03 with MIT License 6 votes vote down vote up 
Router = () => {

    return (
	<Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
       	<Header/>

      	<Switch>
        	<Route path="/" exact>It's index page</Route>

        	<Route path="/chats">
           		<div className="chat-field">
            	<ChatListContainer />
            	<Switch>
            		<Route path="/chats/:id" exact component={ChatContainer} />
            	</Switch>
            	</div>
            </Route>


        	<Route path="/profile" exact component={Profile} />
        	<Route path="/">It's 404 page. Not found.</Route>
      	</Switch>
      </ConnectedRouter>
      </PersistGate>
	</Provider>
    )
}
Example #21
Source File: App.jsx    From react-03.03 with MIT License 6 votes vote down vote up 
App = () => {
    return (
        <Provider store={store}>
            <PersistGate loading={ null } persistor={ persistor }>
                <ConnectedRouter history={history}>
                    <NavBar />
                    <Switch>
                        <Route exact path="/" component={Main} />
                        <Route path="/chats">
                            <Switch>
                                <Route exact path="/chats" component={ChatContainer} />
                                <Route exact path="/chats/:id" component={ChatContainer} />
                            </Switch>
                        </Route>
                        <Route exact path="/profile" component={Profile} />
                        <Route exact path="/about" component={About} />
                        <Route path="/" component={Main} />
                    </Switch>
                </ConnectedRouter>
            </PersistGate>
        </Provider>
    )
}
Example #22
Source File: App.jsx    From react-14.01 with MIT License 6 votes vote down vote up 
render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <ConnectedRouter history={history}>
                        <InstallPopup />
                        <Switch >
                            <Route path='/profile' exact component={ProfileContainer}></Route>
                            <Route path='/chats/:id' exact component={ChatContainer} />
                            <Route path='/chats' exact component={ChatListContainer}></Route>
                        </Switch>
                    </ConnectedRouter>
                </PersistGate>
            </Provider>
        )

    }
Example #23
Source File: index.js    From react-14.01 with MIT License 6 votes vote down vote up 
ReactDOM.render(
    <Provider store={ store }>
        <PersistGate loading={ null } persistor={ persistor }>
            <ConnectedRouter history={history}>
                <MuiThemeProvider>
                    <Router />
                </MuiThemeProvider>
            </ConnectedRouter>
        </PersistGate>
    </Provider>,
    document.getElementById('root'),
 );
Example #24
Source File: Layout.jsx    From react-14.01 with MIT License 6 votes vote down vote up 
render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <ConnectedRouter history={history}>
            <Switch>
              <Route path="/profile" exact component={HeaderContainer} />
              <Route path="/chats" exact component={HeaderContainer} />
              <Route path="/chats/:chatId" exact component={HeaderContainer} />
            </Switch>
            <div className="Chat">
              <ChatListContainer className="ChatList-Position" />
              <div className="ChatField-Position">
                <Switch>
                  <Route path="/profile" exact component={ProfileContainer} />
                  <Route path="/chats" exact component={ChatContainer} />
                  <Route
                    path="/chats/:chatId"
                    exact
                    component={ChatContainer}
                  />
                </Switch>
              </div>
            </div>
          </ConnectedRouter>
        </PersistGate>
      </Provider>
    );
  }
Example #25
Source File: Layout.jsx    From react-14.01 with MIT License 6 votes vote down vote up 
render() {
        return (
            <div className="layout-wrap">
                <Provider store={store}>
                    <PersistGate loading = {null} persistor={persistor}>
                        <Router />
                    </PersistGate>
                </Provider>
                <InstallPopup />
            </div>
        )
    }
Example #26
Source File: App.jsx    From react-14.01 with MIT License 6 votes vote down vote up 
render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <ConnectedRouter history={history}>
                        <Header />
                        <Switch>
                            <Route path="/" exact>
                                Root
                        </Route>
                            <Route path="/chats/" exact component={ChatContainer} />
                            <Route path="/chats/:id" exact component={ChatContainer} />
                            <Route path="/about">
                                It's about
                        </Route>
                            <Route path="/home">
                                It's home
                        </Route><Route path="/profile">
                                It's profile
                    </Route>
                            <Route path="/">
                                It's 404
                        </Route>
                        </Switch>
                    </ConnectedRouter>
                </PersistGate>
            </Provider>
        )
    }
Example #27
Source File: index.js    From react-redux-jsonplaceholder with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #28
Source File: store.js    From react-tutorial with MIT License 6 votes vote down vote up 
StateProvider = ({ children }) => {
	return (
		<Provider store={store}>
			<PersistGate loading={<div>Loading...</div>} persistor={persistor}>
				{children}
			</PersistGate>
		</Provider>
	);
}
Example #29
Source File: index.js    From CodeSignal-Practice_Solutions with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);