Merge pull request #28 from nbrady-techempower/back-to-the-future

Never a stale moment

Author: NateBrady23

README.md

@@ -5,7 +5,6 @@
 ![Open Issues](https://img.shields.io/github/issues-raw/techempower/react-governor.svg)
 ![Build Status](https://travis-ci.org/TechEmpower/react-governor.svg?branch=master)
 
-
 Use a governor hook to manage state with actions for, and created by, the people.
 
 Available as an [npm package](https://www.npmjs.com/package/@techempower/react-governor).
@@ -22,15 +21,15 @@ build the boilerplate of `actions`, `dispatch`, and `reducer`.
 const initialState = { count: 1 };
 
 const contract = {
-  increment(state) {
-    return {
-      count: state.count + 1
-    };
+  increment() {
+    return () => ({
+      count: this.state.count + 1
+    });
   },
-  add(val, state) {
-    return {
-      count: state.count + val
-    }
+  add(val) {
+    return () => ({
+      count: this.state.count + val
+    });
   }
 }
 
@@ -48,7 +47,7 @@ export default function Counter() {
 }
 ```
 
-[Test that this works](https://codesandbox.io/s/hopeful-shannon-lz433)
+[Test that this works](https://codesandbox.io/s/focused-borg-4rrsh)
 
 This should feel very similar to how `useReducer` works with actions and
 reducers.
@@ -58,8 +57,8 @@ These actions are functions which take in any number of arguments and the
 current state. These actions are responsible for returning an object that
 describes what in the state should be mutated.
 
-As from our example, the `increment` action returns an object describing that
-the state should be mutated such that `count` is `state.count + 1`. Similarly,
+As from our example, the `increment` action returns a reducer function describing that
+the state should be mutated such that `count` is `this.state.count + 1`. Similarly,
 the `add` action returns an object describing that the state should be mutated
-such that `count` is `state.count + val`, and notice that when we called `add`
+such that `count` is `this.state.count + val`, and notice that when we called `add`
 that we passed it a value to add.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techempower/react-governor",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "The easiest way to govern over your application's state and actions.",
   "license": "BSD-3",
   "repository": {

src/examples/counter/Counter.js

@@ -20,7 +20,7 @@ export default function Counter() {
         onClick={() => actions.addNewState("Hello")}
       />
       <button className="removeState" onClick={() => actions.removeState()} />
-      <button className="asyncFunc" onClick={actions.asyncFunc} />
+      <button className="asyncFunc" onClick={() => actions.asyncFunc()} />
       <button
         className="compoundAsyncFunc"
         onClick={() => {
@@ -31,7 +31,7 @@ export default function Counter() {
         }}
       />
       <input className="googleStatus" value={state.status} />
-      <button className="fetchGoogle" onClick={actions.fetchGoogle} />
+      <button className="fetchGoogle" onClick={() => actions.fetchGoogle()} />
     </div>
   );
 }

src/examples/counter/CounterContract.js

@@ -5,39 +5,39 @@ export const initialState = {
 };
 
 export const contract = {
-  increment(state) {
-    return {
-      count: state.count + 1
-    };
+  increment() {
+    return () => ({
+      count: this.state.count + 1
+    });
   },
-  decrement(state) {
-    return {
-      count: state.count - 1
-    };
+  decrement() {
+    return () => ({
+      count: this.state.count - 1
+    });
   },
-  add(val, state) {
-    return {
-      count: state.count + val
-    };
+  add(val) {
+    return () => ({
+      count: this.state.count + val
+    });
   },
   set(val) {
-    return {
+    return () => ({
       count: val
-    };
+    });
   },
-  addSum(val, val2, state) {
-    return {
-      count: state.count + val + val2
-    };
+  addSum(val, val2) {
+    return () => ({
+      count: this.state.count + val + val2
+    });
   },
-  addNewState(val, state) {
-    return {
-      ...state,
+  addNewState(val) {
+    return () => ({
+      ...this.state,
       newState: val
-    };
+    });
   },
   removeState() {
-    return {};
+    return () => ({});
   },
   async asyncFunc() {
     // Block with a promise that resolved a new count
@@ -48,8 +48,8 @@ export const contract = {
     );
 
     // set the state count to our promised count
-    return state => ({
-      count: state.count + count
+    return () => ({
+      count: this.state.count + count
     });
   },
   async fetchGoogle() {
@@ -58,10 +58,5 @@ export const contract = {
     return () => ({
       status: google.status
     });
-  },
-  statedInc(state) {
-    return {
-      count: state.count + 1
-    };
   }
 };

src/examples/render-counting/Counter.js

@@ -13,19 +13,19 @@ export default function Counter() {
     actions.multiply(0);
     actions.add(2);
     actions.add(6);
-  }, []);
+  }, [actions]);
 
   useEffect(() => {
     if (state.count === 2) {
       actions.set(-1);
     }
-  }, [state.count]);
+  }, [actions, state.count]);
 
   useEffect(() => {
     if (state.count === 8) {
       actions.divide(2);
     }
-  }, [state.count]);
+  }, [actions, state.count]);
 
   numRenders++;
 

src/examples/render-counting/CounterContract.js

@@ -3,24 +3,24 @@ export const initialState = {
 };
 
 export const contract = {
-  add(val, state) {
-    return {
-      count: state.count + val
-    };
+  add(val) {
+    return () => ({
+      count: this.state.count + val
+    });
   },
   set(val) {
-    return {
+    return () => ({
       count: val
-    };
+    });
   },
-  multiply(val, state) {
-    return {
-      count: state.count * val
-    };
-  },
-  divide(val, state) {
-    return {
-      count: state.count / val
-    };
+  multiply(val) {
+    return () => ({
+      count: this.state.count * val
+    });
   },
+  divide(val) {
+    return () => ({
+      count: this.state.count / val
+    });
+  }
 };

src/examples/simple-counter/SimpleCounter.js

@@ -2,17 +2,17 @@ import React from "react";
 import { useGovernor } from "../..";
 
 const contract = {
-  increment(state) {
-    return state + 1;
+  increment() {
+    return () => this.state + 1;
   },
-  decrement(state) {
-    return state - 1;
+  decrement() {
+    return () => this.state - 1;
   },
-  add(num, state) {
-    return state + num;
+  add(num) {
+    return () => this.state + num;
   },
-  subtract(num, state) {
-    return state - num;
+  subtract(num) {
+    return () => this.state - num;
   }
 };