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: 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 #2
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 #3
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 #4
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 #5
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 #6
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 #7
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 #8
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 #9
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 #10
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 #11
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 #12
Source File: index.js    From zubhub with GNU Affero General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <React.StrictMode>
        <ThemeProvider theme={theme}>
          <Suspense fallback={null}>
            <App />
          </Suspense>
        </ThemeProvider>
      </React.StrictMode>
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
);
Example #13
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 #14
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')
);
Example #15
Source File: App.js    From reactjs-functions with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Layout>
          <Router>
            <Switch>
              <Public path="/" exact component={LoginForm} />
              <Public path="/register" exact component={RegisterForm} />
              <Protected exact path="/list" component={AddressBookList} />
              <Protected exact path="/statistics" component={ReportList} />
              <Protected exact path="/settings" component={ChangePassword} />
              <Redirect from="*" to="/" />
            </Switch>
          </Router>
        </Layout>
      </PersistGate>
    </Provider>
  );
}
Example #16
Source File: StateProvider.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
export default function StateProvider({ children }) {
  const authentication = useRecoilValue(authenticationState);

  useEffect(() => {
    const persistenceItems = createStore(authentication);
    store = persistenceItems.store;
    persistor = persistenceItems.persistor;

    store.dispatch({
      type: actionTypes.SET_AUTH,
      payload: authentication,
    });
    return () => {
      persistor.flush().then(() => {
        persistor.pause();
        store.dispatch({
          type: actionTypes.CLEAR_PATIENT_DATA,
        });
        store = null;
        persistor = null;
      });
    };
  }, [authentication]);

  if (!store) {
    return <LoadingIndicator />;
  }

  return (
    <Provider store={store}>
      <PersistGate
        loading={<LoadingIndicator />}
        persistor={persistor}
      >
        { children }
      </PersistGate>
    </Provider>
  );
}
Example #17
Source File: medium-reader.js    From mediumx with MIT License 6 votes vote down vote up 
function _attachFloatingButton() {
  let { store, persistor } = configureStore();
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>,
    floatingButtonParent
  );
}
Example #18
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 #19
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 #20
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 #21
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 #22
Source File: index.jsx    From ResoBin with MIT License 6 votes vote down vote up 
StrictApp = () => {
  useEffect(() => {
    initSentry()
  }, [])

  return (
    <StrictMode>
      <Provider store={store}>
        <PersistGate loading={<LoaderAnimation />} persistor={persistor}>
          <Router>
            <HelmetProvider>
              <App />
            </HelmetProvider>
          </Router>
        </PersistGate>
      </Provider>
    </StrictMode>
  )
}
Example #23
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 #24
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 #25
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 #26
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 #27
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 #28
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 #29
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>
  );
}