Skip to content

Instantly share code, notes, and snippets.

@mikesorae
Created September 9, 2019 01:37
Show Gist options
  • Save mikesorae/8805de66674455a11d10c1f83173b4f6 to your computer and use it in GitHub Desktop.
Save mikesorae/8805de66674455a11d10c1f83173b4f6 to your computer and use it in GitHub Desktop.
SFC version of redux-persist synchronized App Component
import React, { useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import { CircularProgress } from '@material-ui/core'; // replace to any loader component as you like
import configureStore from './Store'; // your redux store
// redux-persistのrehydrationがreactのinitよりも遅いので
// 初期化を遅延させるためのコンポーネント
export const AppProvider: React.SFC<{ children: any }> = ({ children }) => {
const [rehydrated, setRehydrated] = useState(false);
const [config, setConfig] = useState<ReturnType<typeof configureStore> | null>(null);
useEffect(() => {
const callback = () => {
setRehydrated(true);
}
const tmp = configureStore(callback);
setConfig(tmp);
}, []);
// persistの同期が終わるまでloaderを返す
if (!rehydrated) {
return <CircularProgress />;
}
// TODO: TypeGuard
return (
<Provider store={config!.store}>
{children}
</Provider>
)
}
export default AppProvider;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment