Reputation: 801
I could use a little help with the configuration of redux-persist. I have a redux store with two middlewares, the configuration works but I can't add redux-persist properly. either I manage to rehydrate but the actions no longer call the reducer or I have various errors. I find the redux-persist doc a little poor.
Here is my current configuration:
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 logger from 'redux-logger';
import allReducer from './reducers';
export default function configureStore() {
return createStore(
allReducer,
applyMiddleware(thunk, logger)
);
}
Upvotes: 0
Views: 1759
Reputation: 801
I have finally succeeded, if it helps, here is the configuration to setup:
Store.js
import { createStore, applyMiddleware, compose } from 'redux';
import { persistReducer } from 'redux-persist'
import LocalStorage from 'redux-persist/lib/storage'
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import allReducer from './reducers';
const persistConfig = {
key: 'xxxx-key-xxxx',
storage: LocalStorage,
}
const persistedReducer = persistReducer(persistConfig, allReducer)
export default createStore(
persistedReducer,
applyMiddleware(thunk, logger)
);
persistStore.js
import { persistStore } from 'redux-persist'
import store from './store';
export default persistStore(store);
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import store from './stores/store';
import persistor from './stores/persistedStore';
import Router from './routes'
import './App.css';
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router/>
</PersistGate>
</Provider>
);
}
}
export default App;
Here the list of dependencies and versions
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"
At the moment the named exports do not work so I had to create a second file for the persistor in order to be able to use the default export for the store and the persistor.
Upvotes: 3