refactor: Move store config to another folder and add psersistStore, …

…presistReducer

see: #16

src/configureStore.js

@@ -0,0 +1,67 @@
+import { applyMiddleware, createStore, compose } from "redux"
+import { routerMiddleware } from "react-router-redux"
+import { createLogger } from "redux-logger"
+import rootSagas from "./sagas"
+import createSagaMiddleware from "redux-saga"
+import { composeWithDevTools } from "redux-devtools-extension"
+import storage from "redux-persist/lib/storage" // defaults to localStorage for web and AsyncStorage for react-native
+import { persistStore, persistReducer } from "redux-persist"
+import history from "./history"
+import rootReducer from "./reducers"
+
+const composeEnhancers =
+  process.env.NODE_ENV !== "production" &&
+  composeWithDevTools ?
+    composeWithDevTools({
+      features: {
+        pause: true, // start/pause recording of dispatched actions
+        lock: true, // lock/unlock dispatching actions and side effects
+        persist: true, // persist states on page reloading
+        export: true, // export history of actions in a file
+        import: "custom", // import history of actions from a file
+        jump: true, // jump back and forth (time travelling)
+        skip: true, // skip (cancel) actions
+        reorder: true, // drag and drop actions in the history list
+        dispatch: true, // dispatch custom actions or action creators
+        test: true // generate tests for the selected actions
+      }
+    }) : compose
+
+
+const configureStore = () => {
+
+  const sagaMiddleware = createSagaMiddleware()
+  const historyMiddleware = routerMiddleware(history)
+  const logger = createLogger()
+  const middlewares = [sagaMiddleware, logger, historyMiddleware]
+  const persistConfig = {
+    key: "root",
+    storage
+  }
+
+  const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+  const store = createStore(
+    persistedReducer,
+    composeEnhancers(applyMiddleware(...middlewares)
+    )
+  )
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept(() => {
+      const nextRootReducer = require("./reducers/index")
+      store.replaceReducer(
+        persistReducer(persistConfig, nextRootReducer)
+      )
+    })
+  }
+
+  const persistor = persistStore(store)
+
+  sagaMiddleware.run(rootSagas)
+  return {store, persistor}
+
+}
+
+export default configureStore

src/index.js

@@ -7,6 +7,8 @@ import { ConnectedRouter, routerMiddleware } from "react-router-redux"
 
 import { library } from "@fortawesome/fontawesome-svg-core"
 import { fab } from "@fortawesome/free-brands-svg-icons"
+import configureStore from "./configureStore"
+import { persistStore } from "redux-persist"
 
 import App from "./App"
 import rootSagas from "./sagas"
@@ -18,51 +20,23 @@ import history from "./history"
 import rootReducer from "./reducers"
 import { composeWithDevTools } from "redux-devtools-extension"
 import "regenerator-runtime/runtime"
-
-const sagaMiddleware = createSagaMiddleware()
-const historyMiddleware = routerMiddleware(history)
-const logger = createLogger()
-const middleware = [sagaMiddleware, logger, historyMiddleware]
-
-const composeEnhancers =
-	process.env.NODE_ENV !== "production" &&
-	composeWithDevTools ?
-		composeWithDevTools({
-			features: {
-				pause: true, // start/pause recording of dispatched actions
-				lock: true, // lock/unlock dispatching actions and side effects
-				persist: true, // persist states on page reloading
-				export: true, // export history of actions in a file
-				import: "custom", // import history of actions from a file
-				jump: true, // jump back and forth (time travelling)
-				skip: true, // skip (cancel) actions
-				reorder: true, // drag and drop actions in the history list
-				dispatch: true, // dispatch custom actions or action creators
-				test: true // generate tests for the selected actions
-			}
-		}) : compose
-
-const store = createStore(
-	rootReducer,
-	composeEnhancers(
-		applyMiddleware(...middleware)
-	)
-)
-
-// Begin our Index Saga
-sagaMiddleware.run(rootSagas)
-
-const render = Component =>
-	ReactDOM.render(
-		<AppContainer>
-			<Provider store={ store }>
-				<ConnectedRouter history={ history }>
-					<Component/>
-				</ConnectedRouter>
-			</Provider>
-		</AppContainer>,
-		document.getElementById("root")
-	)
+import { PersistGate } from "redux-persist/integration/react"
+
+const render = async (Component) => {
+  const {store, persistor} = await configureStore()
+  ReactDOM.render(
+    <AppContainer>
+      <Provider store={ store }>
+        <PersistGate loading={ null } persistor={ persistor }>
+          <ConnectedRouter history={ history }>
+            <Component/>
+          </ConnectedRouter>
+        </PersistGate>
+      </Provider>
+    </AppContainer>,
+    document.getElementById("root")
+  )
+}
 
 render(App)