Reputation: 11
I am using redux, redux-persist with middleware redux-thunk to fetch Json API.. My Problem is i cannot use it anymore when wifi is off.. Storage Does'nt work well to use offline.
Here is my codes.
Store.js
-------------
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/es/storage';
import thunk from 'redux-thunk';
import rootReducer from './RootReducers';
const middleware = [thunk];
const persistConfig = {
key: 'root',
storage
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancers = composeEnhancers(
applyMiddleware(...middleware),
);
export default () => {
const store = createStore(persistedReducer, enhancers)
const persistor = persistStore(store);
return { store, persistor: persistor };
};
Upvotes: 1
Views: 548
Reputation: 3536
Maybe you forgot to call your exported function from configureStore.js
.
Call it inside your app entrypoint. I think at this point, the redux-persist lib is poorly documented, because you can find the most solutions inside the issue tab.
This works for me:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// store
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './configureStore.js';
// call your store config
const { persistor, store } = configureStore();
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<div>
App
</div>
</PersistGate>
</Provider>
);
}
}
export default App;
Upvotes: 1