redux-supermodel - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

dist/actionCreators.js

@@ -82,4 +82,8 @@ 'use strict';
 
+      function getResult(val) {
+        return typeof val === 'function' && val.call(definition, { data: data, method: method }) || val;
+      }
+
       if (urlRoot) {
-        var _part = typeof urlRoot === 'function' && urlRoot.call(definition, { data: data, method: method }) || urlRoot;
+        var _part = getResult(urlRoot);
         var id = data[idAttribute];
@@ -95,3 +99,3 @@
 
-      var part = typeof url === 'function' && url.call(definition, { data: data, method: method }) || url;
+      var part = getResult(url);
       return urlAppend(baseUrl, part);
@@ -98,0 +102,0 @@ }

dist/mapResourceStateToProps.js

@@ -29,3 +29,3 @@ 'use strict';
 
-    if (!resource || !resource.initialized) {
+    if (!resource || !resource.initialized && !resource.busy && !resource.error) {
       return _defineProperty({ payload: defaultPayload }, _metaTag, true);
@@ -32,0 +32,0 @@ }

package.json

 {
   "name": "redux-supermodel",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "A package of action creator functions and reducers that deal with the state management of REST-like APIs for you... all you need is a URL!",
@@ -5,0 +5,0 @@ "repository": "https://github.com/MrLeebo/redux-supermodel",

README.md

@@ -54,3 +54,3 @@ # redux-supermodel
 
-The easiest way to use **redux-supermodel** is with the [bindResource](docs/bindResource.md) higher-order component which will automatically fetch the resource when the component mounts, reset it when the component unmounts, and binds the resource's props and action creators to the component's props. 
+You can use the `connect` Higher-Order Component to attach your resource state to your component and bind any action creators you want to use. Most of the time, you will be fetching something when the component mounts. If this is the only component that will use the resource, you can reset it when the component unmounts. Usually `create` and `update` action creators will be bound to the button or submit handlers on your form.
 
@@ -60,20 +60,53 @@ ```jsx
 
-import React from 'react'
-import { bindResource } from 'redux-supermodel'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import { post } from './resources'
 
-export function MyComponent (props) {
-  const { ready, error, title, body, fetchPost } = props
-  if (!ready) return <div className="loading">Loading...</div> 
-  if (error) return <div className="error">{error.message}</div>
+export class MyComponent extends Component {
+  async componentDidMount() {    
+    try {
+      const res = await this.props.fetchPost()
+      
+      // AJAX action creators are promises, so you can await on them to 
+      // handle errors or do something after they finish.
+      console.log(res)
+    } catch (error) {
+      // redux-supermodel will track the error state for you, but 
+      // you can also do your own thing.
+      alert('Something bad happened!')
+    }
+  }
   
-  return (
-    <div>
-      <h1>{title}</h1>
-      <div className="body">
-        {body}
+  componentWillUnmount() {
+    // If you only ever access a resource within the context of a single component and
+    // its children, you can reset the resource on unmount to clean up your redux state.
+    this.props.resetPost()
+  }
+
+  render() {
+    const { initialized, error, title, body, fetchPost } = props
+    
+    if (!initialized) {
+      if (error) {
+        return <div className="error">{error.message}</div>
+      } else {
+        return <div className="loading">Loading...</div> 
+      }
+    }
+
+    return (
+      <div>
+        <h1>{title}</h1>
+        <div className="body">
+          {body}
+        </div>
+
+        <div className="error">
+          {error.message}
+        </div>
+
+        <button type="button" onClick={fetchPost}>Refresh</button>
       </div>
-      <button type="button" onClick={fetchPost}>Refresh</button>
-    </div>
-  )
+    )
+  }
 }
@@ -87,3 +120,8 @@
 
-export default bindResource({post}, {mapProps})(MyComponent)
+const actions = { 
+  fetchPost: () => post.fetch({ id: 'latest' }),
+  resetPost: post.reset,
+}
+
+export default connect(mapProps, actions)(MyComponent)
 ```
@@ -90,0 +128,0 @@

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

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

42567

increased by12.52%

Number of package files

19

increased by11.76%

Lines of code

644

increased by0.47%

Number of lines in readme file

152

increased by33.33%

No dependency changes