redux tutorial

package.json

@@ -7,12 +7,13 @@
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-thunk": "2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import "./App.css";
 import { connect } from "react-redux";
+import * as actionCreator from "./store/actions/actions";
+import logo from "./logo.svg";
 
 class App extends Component {
   render() {
@@ -11,21 +13,25 @@ class App extends Component {
         </div>
         <button onClick={this.props.onAgeUp}>Age UP</button>
         <button onClick={this.props.onAgeDown}>Age Down</button>
+        {this.props.loading && (
+          <img src="logo" alt={logo} className="App-logo" />
+        )}
       </div>
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    age: state.age
+    age: state.age,
+    loading: state.loading
   };
 };
 
 const mapDispachToProps = dispatch => {
   return {
-    onAgeUp: () => dispatch({ type: "AGE_UP", value: 1 }),
-    onAgeDown: () => dispatch({ type: "AGE_DOWN", value: 1 })
+    onAgeUp: () => dispatch(actionCreator.ageUp(1)),
+    onAgeDown: () => dispatch(actionCreator.ageDown(1))
   };
 };
 export default connect(

src/index.js

@@ -1,13 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reducer from './store/reducer';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reducer from "./store/reducers/reducer";
+import thunk from "redux-thunk";
 
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
 
-const store = createStore(reducer);
-
-ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
+const store = createStore(reducer, applyMiddleware(thunk));
 
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
+);

src/store/actions/actions.js

@@ -0,0 +1,22 @@
+export const loading = () => {
+  return {
+    type: "LOADING"
+  };
+};
+
+export const ageUpAsnc = value => {
+  return { type: "AGE_UP", value };
+};
+
+export const ageUp = value => {
+  return dispatch => {
+    dispatch(loading());
+    setTimeout(() => {
+      dispatch(ageUpAsnc(value));
+    }, 5000);
+  };
+};
+
+export const ageDown = value => {
+  return { type: "AGE_DOWN", value };
+};

src/store/reducers/reducer.js

@@ -0,0 +1,25 @@
+const initialState = {
+  age: 20,
+  loading: false
+};
+
+const reducer = (state = initialState, action) => {
+  const newState = { ...state };
+
+  switch (action.type) {
+    case "AGE_UP":
+      newState.age += action.value;
+      newState.loading = false;
+      break;
+
+    case "AGE_DOWN":
+      newState.age -= action.value;
+      break;
+    case "LOADING":
+      newState.loading = true;
+      break;
+  }
+  return newState;
+};
+
+export default reducer;