Delay Render Until Rehydration Complete

store-bootloader.js

// configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import { autoRehydrate, persistStore } from 'redux-persist';
import { localStorage } from 'redux-persist/storages';
import { rootReducer } from '../reducers';

export default function configureStore() {
  // use desired middlewares
  const middlewares = [];

  return new Promise((resolve, reject) => {
    try {
      const store = createStore(
        rootReducer,
        undefined,
        compose(
          autoRehydrate(),
          applyMiddleware(...middlewares),
        ),
      );

      persistStore(
        store,
        { storage: localStorage },
        () => resolve(store)
      );
    } catch (e) {
      reject(e);
    }
  });
}

// application entry file

import React, { Component } from 'react'
import { Provider } from 'react-redux';
import configureStore from './configureStore';

class Bootloader extends Component {
  state = {
    store: null
  }

  async componentWillMount () {
    const store = await configureStore();
    this.setState({ store });
  }

  render () {
    if (this.state.store === null) {
      return (
        <Text>
          Booting...
        </Text>
      )
    }

    return (
      <Provider store={this.state.store}>
        <App />
      </Provider>
    )
  }
}

export default Bootloader