How to use with redux-thunk about redux-persist

[rt2zz]

more specifically I think what you are asking is how to use it with applyMiddleware. both applyMiddleware and autoRehydrate are store enhancers so you can compose them as follows:

const store = createStore(
  combineReducers(reducers),
  {},
  compose(
    autoRehydrate(),
    applyMiddleware(thunk)
  )
)

This is using the new redux enhancer as a third argument api, so make sure your redux is up to date. 👍

[jaruesink]

store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from '../reducers';
import initialState from './initialState';
import { isDevelopmentEnvironment } from '../environment';

export const history = createHistory();

const enhancers = [];
const middleware = [thunk];

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

if (isDevelopmentEnvironment()) {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

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

export default () => {
  const store = createStore(persistedReducer, initialState, composedEnhancers);
  return { store, persistor: persistStore(store) };
};

App.js

//@flow

// Vendors
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

// Layouts
import { LayoutGlobal } from './layouts';

// Store
import configureStore from './store';

const { persistor, store } = configureStore();

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <LayoutGlobal />
    </PersistGate>
  </Provider>
);

export default App;

[gaearon]

Thanks, but I still get an error. Says "compose is not defined"

Yes, it is not a global. It is exported from redux, just like applyMiddleware. Modern libraries usually don’t export globals, so if you see something that wasn’t declared, it’s very likely that it needs to be imported from somewhere.

import { createStore, applyMiddleware, compose } from 'redux'

[rt2zz]

I should note you will need to import all of those methods and also run persistStore:

import {autoRehydrate, persistStore} from 'redux-persist'

// ...

persistStore(store)

[skizzo]

Thanks, but I still get an error. Says "compose is not defined" at the line #4 of your code snippet before. package.json says I run v4.4.0 of react-redux and v1.5.5 of redux-persist, in the same file i added the line

import { autoRehydrate, persistStore } from 'redux-persist';

before.

[skizzo]

Works like a charm now, many thanks.

[roadev]

Thank you very much @rt2zz !

[taime]

I've got an error 'redux-persist' does not contain an export named 'autoRehydrate'.

[lxblvs]

Same as the poster above. Maybe this should be added to the documentation.

[jsaya01]

Was anyone able to solve the autoRehydrate issue?

[jaruesink]

autoRehydrate was taken out in v5 from what I could tell, still looking for how this works with the latest version of persist.