'Redux Persist Gate on Nested persisted store

I'm trying to get Redux Persist Gate to work

In app.tsx let persistor = persistStore(store);

 <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>

However I have nested persists following instructions described here https://github.com/rt2zz/redux-persist#nested-persists

So when the app loads I get around 7 Hydrated actions.

So the PersistGate only appears to work at the top level, so I tried implementing my own to check if a particular reducer had hydrated as described here

PersistGate opens before state loads

With the following:

export default memo(function StoreGate({ children, loading }: { children: any; loading: any }) {
  const { rehydrated } = useSelector((state: RootState) => state.core.session._persist);


  return rehydrated ? children : loading;
});

This works, but gives the Warning

react-dom.development.js:86 Warning: Cannot update a component (StoreGate) while rendering a different component (Example). To locate the bad setState() call inside Example, follow the stack trace as described in

On every page. Whats the best way to deal with PersistGate and nested persists?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source