Redux-persist: PersistGate doesn't work

[brave-merida]

My code:

const config = {
  key: 'root', // key is required
  storage, // storage is now required
}
const reducer = persistReducer(
  config,
  combineReducers({
    ...reducers,
    router: routerReducer
  })
);

const history = createHistory();
const sagaMiddleware = createSagaMiddleware();
const routeMiddleware = routerMiddleware(history);
const middlewares = [thunk, sagaMiddleware, routeMiddleware];

let store = createStore(
  reducer,
  compose(applyMiddleware(...middlewares))
);
let persistor = persistStore(store);

sagaMiddleware.run(rootSaga);

export { persistor, store, history };

After that, I have used the PersistGate in App component.

render() {
  return (
      <PersistGate persistor={persistor}>
         ...
      </PersistGate>
}

But I have got error:

PersistGate.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

[gabeweaver]

@brave-merida - the loading prop is required. If you don't want to return a loader, you still have to specify loading={null}. It's not specified as a required prop, but that's what was broken for me at first. Hope it helps - https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md

[rt2zz]

Would it be cleaner to make it optional? we can default it to null although that wont work for react 15...

[brave-merida]

Thanks,
I've tried without PersistGate. used only above code to create store!
First, it's ok, but if I refresh the page then state.auth is null. why and how to?

[rt2zz]

I would strongly recommend you use PersistGate, otherwise weird things might happen when your app mounts without the rehydrated state.

[gabeweaver]

@rt2zz I dunno...some other packages make a loader required (like https://github.com/thejameskyle/react-loadable), others don't. Personally I feel like it should not be required...because at that point, redux-persist is now enforcing a UX decision which i don't think packages should do necessarily.

That being said, to maintain react 15 compat, this seems to work based on the rudimentary example:

interface Props {
  children: any,
  loading?: React.ReactNode
}

class PersistGate extends React.Component<Props> {
  public render () {
    const rehydrated = false
    const loading = false

    switch (true) {
      case loading && !rehydrated:
        return <div>loading...</div>
      case !loading && !rehydrated:
        return false
      default:
        return rehydrated && this.props.children
    }
  }
}

that yields:

<div id="root"><!-- react-empty: 1 --></div>

in the example, if you flip rehydrated to true, the children will then render...if you flip rehydrated to false and loading to true, you'll get the loading node. if you flip both to true, children render. I think you could take something like that and apply it the current PersistGate but replace rehydrated with this.state.bootstrapped and loading with this.props.loading

[rt2zz]

I agree it should be optional, and probably return the less opinionated null rather than <div>loading</div> among other reasons because we might be running outside of dom and not have div.

I suppose if someone is using react 15 they will be forced to provide a value, which is likely something we can put a dev helper check for.

Thanks for the feedback 👍