Add redux thunk middleware

package.json

@@ -12,12 +12,16 @@
     "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
     "@types/react-redux": "^7.0.3",
+    "@types/redux": "^3.6.0",
+    "@types/redux-devtools-extension": "^2.13.2",
+    "@types/redux-thunk": "^2.1.0",
     "babel-cli": "6.26.0",
     "babel-preset-env": "1.6.0",
     "clean-webpack-plugin": "^2.0.0",
     "css-loader": "0.28.5",
     "file-loader": "0.11.2",
     "html-webpack-plugin": "^3.2.0",
+    "redux-devtools-extension": "^2.13.8",
     "style-loader": "0.18.2",
     "ts-loader": "^5.3.3",
     "typescript": "^3.3.3333",
@@ -26,10 +30,10 @@
     "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
-    "@types/redux": "^3.6.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-redux": "^6.0.1",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0"
   }
 }

src/Display.tsx

@@ -3,11 +3,12 @@ import { connect } from 'react-redux'
 
 interface DisplayProps {
     value: number;
+    loading: boolean;
 }
 
 export class Display extends Component<DisplayProps, {}> {
     render() {
-        return (
+        return this.props.loading ? <div>Loading...</div> : (
             <div style={{border: "1px solid black"}}>
                 {this.props.value}
             </div>
@@ -16,7 +17,8 @@ export class Display extends Component<DisplayProps, {}> {
 }
 
 const mapStateToProps = (state: any) => ({
-    value: state.total
+    value: state.total,
+    loading: state.loading
 });
 
 export default connect(mapStateToProps, null)(Display)

src/index.tsx

@@ -14,7 +14,7 @@ class App extends React.Component<{}, {}> {
             <Provider store={store}>
                 <div style={{ margin: "20px" }}>
                     <Input />
-                    <Button title="Add" onClick={() => store.dispatch(add(store.getState().current))} />
+                    <Button title="Add" onClick={() => store.dispatch(add(store.getState().current) as any)} />
                     <Button title="Subtract" onClick={() => store.dispatch(subtract(store.getState().current))} />
                     <Button title="Reset" onClick={() => store.dispatch(reset())} />
                     <Display />

src/store.ts

@@ -1,41 +1,75 @@
-import { createStore } from 'redux';
+import { createStore, applyMiddleware, Reducer, Store, AnyAction} from "redux";
+import { composeWithDevTools } from 'redux-devtools-extension';
+import thunk from 'redux-thunk'
+
+interface StoreState { 
+  total: number; 
+  current: number; 
+  loading: boolean; 
+}
 
 // SET-UP
-const reducer = (state = {total: 0, current: 0}, action: {type: string, payload?: any}) => {
+const reducer: Reducer<StoreState> = (state = { total: 0, current: 0, loading: false }, action: AnyAction) => {
   console.log(action);
 
-  switch(action.type) {
-    case 'SET_CURRENT':
-      return {...state, current: action.payload.value};
-    case 'ADD':
-      return {...state, total: state.total + action.payload.value};
-    case 'SUBTRACT':
-      return {...state, total: state.total - action.payload.value};
-    case 'RESET':
-      return {...state, total: 0};
+  switch (action.type) {
+    case "SET_CURRENT":
+      return { ...state, current: action.payload.value };
+    case "SET_TOTAL":
+      return { ...state, total: action.payload.value };
+    case "SUBTRACT":
+      return { ...state, total: state.total - action.payload.value };
+    case "RESET":
+      return { ...state, total: 0 };
+    case "START_LOADER":
+      return { ...state, loading: true };
+    case "STOP_LOADER":
+      return { ...state, loading: false };
     default:
       return state;
   }
 };
 
-const enhancer = ((window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__())
-
 // ACTION-CREATORS
-export const add = (value: number) => ({
-  type: 'ADD',
-  payload: { value },
-});
+export const add = (value: number) => async (dispatch, getState) => {
+  dispatch(startLoader());
+  const result = await makeComputation(value, getState().total);
+  dispatch(setTotal(result));
+  dispatch(stopLoader())
+};
 
 export const subtract = (value: number) => ({
-  type: 'SUBTRACT',
+  type: "SUBTRACT",
   payload: { value },
 });
 
 export const setCurrent = (value: number) => ({
-    type: 'SET_CURRENT',
-    payload: { value },
-  });
+  type: "SET_CURRENT",
+  payload: { value },
+});
+
+export const setTotal = (value: number) => ({
+  type: "SET_TOTAL",
+  payload: { value },
+});
+
+export const startLoader = () => ({
+  type: "START_LOADER"
+})
+
+export const stopLoader = () => ({
+  type: "STOP_LOADER"
+})
+
+export const reset = () => ({ type: "RESET" });
+
+
+export const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
 
-export const reset = () => ({ type: 'RESET' });
 
-export const store = createStore(reducer, enhancer);
+//HELPERS
+function makeComputation(value, currentValue): Promise<number> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(value + currentValue), 2000)
+  })
+}

tsconfig.json

@@ -4,9 +4,11 @@
         "sourceMap": true,
         "noImplicitAny": false,
         "module": "es2015",
+        "moduleResolution": "node",
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "lib": ["es2015", "dom"]
     }
 }