Redux-persist implemented in Rekit (React Redux w/ addins)

[rjackson159]

The app works fine without redux-persist. I've followed several examples on the implementation of persist...

Here's what I've changed prior to breaking everything:

configStore.js:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import history from './history';
import rootReducer from './rootReducer';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const router = routerMiddleware(history);

const persistConfig = {
  key: 'root',
  storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const enhancers =[];

// NOTE: Do not change middleares delaration pattern since rekit plugins may register middlewares to it.
const middlewares = [
  thunk,
  router,
];

let devToolsExtension = f => f;

/* istanbul ignore if  */
if (process.env.NODE_ENV === 'development') {
  const { createLogger } = require('redux-logger');

  const logger = createLogger({ collapsed: true });
  middlewares.push(logger);

  if (window.devToolsExtension) {
    devToolsExtension = window.devToolsExtension();
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middlewares),
  ...enhancers
);

export default function configureStore(initialState) {
  const store = createStore(persistedReducer, initialState,composedEnhancers,
    devToolsExtension
  );

  /* istanbul ignore if  */
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./rootReducer', () => {
      const nextRootReducer = require('./rootReducer').default; // eslint-disable-line
      store.replaceReducer(nextRootReducer);
    });
  }
  return {store, persistor: persistStore(store)};
}

App.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {NavBar} from './NavBar';
import {PersistGate} from 'redux-persist/integration/react';

export default class App extends Component {
  static propTypes = {
        children: PropTypes.node,
  };

  render() {
    return (
      <div className="examples-layout">
      <PersistGate>
        <NavBar />
        <div className="home-page-container">
          {this.props.children}
        </div>
        </PersistGate>
      </div>
    );
  }
}

Here is the error I get when trying to run the app:

Any help on this would be greatly appreciated!

[ianitsky]

@rjackson159 I think that you forget to implement the persist gate:

On Root.js implement this:

import configureStore from './common/store';
import { PersistGate } from 'redux-persist/integration/react'

class Root extends React.Component {
  render() {
    const children = renderRouteConfigV3(routeConfig, '/');
    return (
      <Provider store={ configureStore.store }>
        <PersistGate loading={null} persistor={configureStore.persistor}>
          <ConnectedRouter history={history}>{children}</ConnectedRouter>
        </PersistGate>
      </Provider>
    );
  }
}