persist card to localStorage with redux-persist

jez321 · Nov 10, 2019 · 064596c · 064596c
1 parent 709cdb9
commit 064596c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-scripts": "3.1.2",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
     "reselect": "^4.0.0"
   },
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -6,12 +6,15 @@ import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import { Provider } from 'react-redux';
-import store from './redux/store';
+import { persistor, store } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react';
 
 ReactDOM.render(
     <Provider store={store}>
         <BrowserRouter>
-            <App />
+          <PersistGate persistor={persistor}>
+              <App />
+          </PersistGate>
         </BrowserRouter>
     </Provider>
     , document.getElementById('root')

diff --git a/src/redux/root-reducer.js b/src/redux/root-reducer.js
@@ -1,8 +1,18 @@
 import { combineReducers } from 'redux';
 import userReducer from './user/user-reducer';
 import cartReducer from './cart/cart-reducer';
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 
-export default combineReducers({
+const persistconfig = {
+  key: 'root',
+  storage,
+  whitelist: ['cart']
+}
+
+const rootReducer = combineReducers({
   user: userReducer,
   cart: cartReducer
 });
+
+export default persistReducer(persistconfig, rootReducer);
diff --git a/src/redux/store.js b/src/redux/store.js
@@ -1,9 +1,9 @@
 import { createStore, applyMiddleware } from 'redux';
 import logger from 'redux-logger';
 import rootReducer from './root-reducer';
+import { persistStore } from 'redux-persist';
 
 const middleware = [logger];
 
-const store = createStore(rootReducer, applyMiddleware(...middleware));
-
-export default store;
+export const store = createStore(rootReducer, applyMiddleware(...middleware));
+export const persistor = persistStore(store);