Extending the example with async reducer. (first try)

aleksandrenko · Jun 21, 2016 · bfbfcc8 · bfbfcc8
1 parent 998ac53
commit bfbfcc8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/examples/simple-counter/app/index.js b/examples/simple-counter/app/index.js
@@ -13,7 +13,8 @@ import Error404 from './pages/Error404';
 store.incrementCounter();
 
 const HomePageConnected = connect((store) => ({
-  counter: store.counter
+  counter: store.counter,
+  status: store.status
 }), store.mapStoreToProps)(HomePage);
 
 // ROUTES

diff --git a/examples/simple-counter/app/pages/Home/index.js b/examples/simple-counter/app/pages/Home/index.js
@@ -2,21 +2,27 @@ import React from 'react';
 
 const Component = React.createClass({
   propTypes: {
-    counter: React.PropTypes.number
+    counter: React.PropTypes.number,
+    status: React.PropTypes.string
   },
   buttonClickHandler() {
     this.props.store.incrementCounter();
   },
   buttonSetClickHandler() {
     this.props.store.setCounter(10);
   },
+  buttonDelayedSetClickHandler() {
+    this.props.store.delayedIncrementCounter(10);
+  },
   render() {
     return (
         <section>
           <h1>Home page</h1>
           <div>Counter: <b>{ this.props.counter }</b></div>
+          <div>Action in progress: <b>{ this.props.status }</b></div>
           <div><button onClick={ this.buttonClickHandler }>Increment counter</button></div>
           <div><button onClick={ this.buttonSetClickHandler }>Set counter to 10</button></div>
+          <div><button onClick={ this.buttonDelayedSetClickHandler }>Increment counter (Delayed)</button></div>
         </section>
     );
   }

diff --git a/examples/simple-counter/app/store.js b/examples/simple-counter/app/store.js
@@ -1,13 +1,14 @@
 import sugarStore from '../../../';
 import { createStore } from 'redux';
 
-const store = sugarStore(createStore, { counter: 0 }, [
+const store = sugarStore(createStore, { counter: 0, status: 'normal' }, [
   {
     incrementCounter: (state, action) => {
       console.log('%cReducer: incrementCounter (green reducer)', 'color: green;');
 
       return {
-        counter: (state.counter + 1)
+        counter: (state.counter + 1),
+        status: 'normal'
       };
     }
   }, {
@@ -21,7 +22,29 @@ const store = sugarStore(createStore, { counter: 0 }, [
       console.log('%cReducer: setCounter', 'color: purple;');
 
       return {
-        counter: action.payload
+        counter: action.payload,
+        status: 'normal'
+      }
+    }
+  },
+  {
+    delayedIncrementCounter: (state, action) => {
+      console.log('%cReducer: delayedIncrementCounter', 'color: red;');
+
+      if (action.payload.done) {
+        return {
+          counter: (state.counter + 1),
+          status: 'normal'
+        };
+      } else {
+        setTimeout(function() {
+          store.delayedIncrementCounter({ done: true });
+        }, 1000);
+      }
+
+      return {
+        counter: state.counter,
+        status: 'in progress'
       }
     }
   }