redux-interactions - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "redux-interactions",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A streamlined approach to managing your Redux action creators and reducers.",
@@ -19,2 +19,3 @@ "homepage": "https://github.com/convoyinc/redux-interactions",
     "compile": "./scripts/compile",
+    "example": "./scripts/example",
     "prepublish": "./scripts/prepublish",
@@ -30,3 +31,3 @@ "test:style": "./scripts/test:style",
     "lodash": "^4.0.0",
-    "unique-type": "^1.0.0"
+    "unique-type": "^1.1.0"
   },
@@ -33,0 +34,0 @@ "devDependencies": {

README.md

@@ -7,3 +7,5 @@ # redux-interactions
 
+If you wish to see it in practice, check out [`examples/todomvc-react`](./examples/todomvc-react).  You can run it locally by checking out this repository and running `npm run example`.
 
+
 ## A Pattern
@@ -142,3 +144,3 @@
   /**
-   * Add a todo.
+   * Add a todo, without involving the server.
    *
@@ -148,3 +150,3 @@ * `@reducer` takes care of the boilerplate of state actions for you:
    * 1. It generates a unique action type, based on the name of the interactions
-   * class and method.  In this case: `TODOS:ADD`.
+   * class and method.  In this case: `TODOS:ADD_LOCAL`.
    *
@@ -154,4 +156,4 @@ * 2. It generates an action creator by the same name, that packages up any
    *
-   *   add(...args) {
-   *     return {type: 'TODOS:ADD', args};
+   *   addLocal(...args) {
+   *     return {type: 'TODOS:ADD_LOCAL', args};
    *   }
@@ -164,3 +166,3 @@ *
   @reducer
-  add(state, id, text, completed = false) {
+  addLocal(state, id, text, completed = false) {
     return [
@@ -173,3 +175,3 @@ ...state,
   /**
-   * Toggle a todo's completion state.
+   * Toggle a todo's completion state, locally.
    *
@@ -184,3 +186,3 @@ * You can also specify a custom action type, if you like.
   @reducer('CUSTOM_TODOS_TOGGLE')
-  toggle(state, id) {
+  toggleLocal(state, id) {
     return state.map(todo => {
@@ -195,3 +197,29 @@ if (todo.id !== id) return todo;
 
+  /**
+   * Add a todo and let the server know.
+   *
+   * This rounds off the example, in an effort to show off the pattern.  Note
+   * that this method is purely an action creator; there's nothing special going
+   * on here.
+   */
+  add(text, completed = false) {
+    return async (dispatch, _getState) => {
+      const todo = {id: uuid.v4(), text, completed, saving: true};
+      // Optimisticaly add the todo to the store for immediate user feedback.
+      dispatch(this.addLocal(todo));
+
+      try {
+        // Lets assume this succeeds for any 2xx; and we assume that means the
+        // todo was successfully persisted.
+        apiRequest('post', '/todos', {body: todo});
+        dispatch(this.markSaved(todo.id));
+      } catch (error) {
+        // TERRIBLE user experience, but this is just an example.
+        dispatch(flash.error(`Failed to save todo, please try again`));
+        dispatch(this.removeLocal(todo.id));
+      }
+    };
+  }
+
 };
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30157

increased by4.28%

Number of lines in readme file

218

increased by14.74%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedunique-type@^1.1.0