update redux to v4

Author: spoeck

README.md

@@ -13,10 +13,11 @@ Inspired by:
 - [x] [React](https://facebook.github.io/react/)
 - [x] [Redux](https://github.com/reactjs/redux)
 - [x] [Redux-Thunk](https://github.com/gaearon/redux-thunk)
+- [x] [Redux-Persist](https://github.com/rt2zz/redux-persist)
 - [x] [React Router](https://github.com/ReactTraining/react-router)
 - [x] [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)
 - [x] [TodoMVC example](http://todomvc.com)
-- [x] Hot Reloading
+- [ ] Hot Reloading
 - [x] PWA Support
 
 ## How to use

package-lock.json

@@ -7,26 +7,28 @@
     "@material-ui/icons": "3.0.1",
     "react": "16.6.0",
     "react-dom": "16.6.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
+    "connected-react-router": "5.0.1",
+    "localforage": "1.7.3",
+    "react-redux": "5.1.0",
+    "react-router": "4.3.1",
     "react-scripts-ts": "3.1.0",
-    "redux": "^3.7.2",
+    "redux": "4.0.1",
     "redux-logger": "3.0.6",
-    "redux-persist": "^5.5.0",
-    "redux-thunk": "2.2.0"
+    "redux-persist": "5.10.0",
+    "redux-thunk": "2.3.0"
   },
   "devDependencies": {
-    "@types/history": "^4.6.2",
+    "@types/history": "4.7.2",
     "@types/jest": "22.1.0",
     "@types/node": "9.4.0",
     "@types/react": "16.4.18",
     "@types/react-dom": "16.0.9",
-    "@types/react-redux": "^5.0.19",
-    "@types/react-router": "^4.0.18",
-    "@types/redux-logger": "^3.0.5",
-    "@types/webpack-env": "^1.13.5",
+    "@types/react-redux": "6.0.9",
+    "@types/react-router": "4.4.0",
+    "@types/redux-logger": "3.0.6",
+    "@types/webpack-env": "1.13.6",
     "csstype": "^2.4.2",
-    "redux-devtools-extension": "^2.13.2",
+    "redux-devtools-extension": "2.13.5",
     "typescript": "3.1.3"
   },
   "scripts": {
@@ -35,4 +37,4 @@
     "test": "react-scripts-ts test --env=jsdom",
     "eject": "react-scripts-ts eject"
   }
-}
+}

package.json

@@ -3,16 +3,17 @@ import { WithWidth } from '@material-ui/core/withWidth';
 import TodoIcon from '@material-ui/icons/FormatListNumbered';
 import HomeIcon from '@material-ui/icons/Home';
 import MenuIcon from '@material-ui/icons/Menu';
-import { createBrowserHistory } from 'history';
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Route, RouteComponentProps, Router } from 'react-router';
+import { Route, RouteComponentProps } from 'react-router';
 import { Todo } from './model/model';
 import HomePage from './pages/HomePage';
 import TodoPage from './pages/TodoPage';
 import { RootState } from './reducers/index';
 import { isSmartphone } from './responsive';
 import withRoot from './withRoot';
+import { history } from './configureStore';
+import { ConnectedRouter } from 'connected-react-router';
 
 export namespace App {
     export interface Props extends RouteComponentProps<void>, WithStyles<typeof styles>, WithWidth {
@@ -24,8 +25,6 @@ export namespace App {
     }
 }
 
-const history = createBrowserHistory();
-
 class App extends React.Component<App.Props, App.State> {
 
     state = {
@@ -70,7 +69,7 @@ class App extends React.Component<App.Props, App.State> {
         );
 
         return (
-            <Router history={history}>
+            <ConnectedRouter history={history}>
                 <div className={classes.root}>
                     <div className={classes.appFrame}>
                         <AppBar className={classes.appBar}>
@@ -118,7 +117,7 @@ class App extends React.Component<App.Props, App.State> {
                         {this.routes}
                     </div>
                 </div>
-            </Router>
+            </ConnectedRouter>
         );
     }
 

src/App.tsx

@@ -1,25 +1,24 @@
+
+import { Typography } from '@material-ui/core';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { applyMiddleware, createStore, Store } from 'redux';
+import { applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import { createLogger } from 'redux-logger';
+import { PersistGate } from 'redux-persist/integration/react';
 import thunk from 'redux-thunk';
 import App from './App';
-import rootReducer, { RootState } from './reducers';
+import configureStore from './configureStore';
 
 const logger = (createLogger as any)();
 
-var middleware;
+var middleware = applyMiddleware(logger, thunk);
 
 if (process.env.NODE_ENV === 'development') {
-    // middleware for development with logger and devTools
-    middleware = composeWithDevTools(applyMiddleware(logger, thunk));
-} else {
-    // middleware for production
-    middleware = applyMiddleware(thunk);
+    middleware = composeWithDevTools(middleware);
 }
 
-const store = createStore(rootReducer, {}, middleware) as Store<RootState>;
+const { persistor, store } = configureStore();
 
 class ReduxRoot extends React.Component {
 
@@ -31,10 +30,12 @@ class ReduxRoot extends React.Component {
 
         return (
             <Provider store={store}>
-                <App />
+                <PersistGate loading={<Typography>Loading...</Typography>} persistor={persistor}>
+                    <App />
+                </PersistGate>
             </Provider>
         );
     }
 }
 
-export default ReduxRoot;
+export default ReduxRoot;

src/ReduxRoot.tsx

@@ -0,0 +1,38 @@
+import { routerMiddleware } from 'connected-react-router';
+import { createBrowserHistory } from 'history';
+import * as localforage from 'localforage';
+import { applyMiddleware, createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { createLogger } from 'redux-logger';
+import { PersistConfig, persistReducer, persistStore } from 'redux-persist';
+import thunk from 'redux-thunk';
+import rootReducer from './reducers';
+
+const persistConfig: PersistConfig = {
+    key: 'root',
+    version: 1,
+    storage: localforage,
+    blacklist: [],
+};
+
+const logger = (createLogger as any)();
+const history = createBrowserHistory();
+
+const dev = process.env.NODE_ENV === 'development';
+
+var middleware = dev ? applyMiddleware(logger, thunk, routerMiddleware(history)) :
+    applyMiddleware(thunk, routerMiddleware(history));
+
+if (dev) {
+    middleware = composeWithDevTools(middleware);
+}
+
+const persistedReducer = persistReducer(persistConfig, rootReducer(history));
+
+export default () => {
+    let store = createStore(persistedReducer, {}, middleware);
+    let persistor = persistStore(store);
+    return { store, persistor };
+};
+
+export { history };

src/configureStore.tsx

@@ -1,12 +1,15 @@
 
+import { connectRouter } from 'connected-react-router';
+import { History } from 'history';
 import { combineReducers } from 'redux';
-import * as todoReducder from './todo';
 import { Todo } from '../model/model';
+import * as todoReducder from './todo';
 
 export interface RootState {
   todoList: Array<Todo>;
 }
 
-export default combineReducers<RootState>({
+export default (history: History) => combineReducers({
+  router: connectRouter(history),
   ...todoReducder
 });