redux-zero - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

CHANGELOG.md

 # Changelog
 
+### 4.2.0
+
+- Binding actions instead of coupling them to the store.
+
+Right now, actions must import an instance of the store in order to invoke `setState()`, as discussed [here](https://github.com/concretesolutions/redux-zero/issues/16). This version solved that problem. Now it's way easier to test the actions, because they are simply pure functions:
+
+```javascript
+const createActions = store => ({
+  increment: state => ({ count: state.count + 1 }),
+})
+
+const App = connect(mapToProps, createActions)(
+  ({ count, increment }) => (
+    <button onClick={increment}>{count}</button>
+  )
+)
+```
+
 ### 4.1.1
@@ -4,0 +22,0 @@

dist/react/components/connect.d.ts

@@ -9,8 +9,10 @@ /// <reference types="react" />
     state: any;
+    actions: {};
     componentWillMount(): void;
     componentWillUnmount(): void;
     getProps(): any;
+    getActions(): {};
     update: () => void;
     render(): any;
 }
-export default function connect(mapToProps: any): (Child: any) => (props: any) => JSX.Element;
+export default function connect(mapToProps: any, actions?: {}): (Child: any) => (props: any) => JSX.Element;

package.json

 {
   "name": "redux-zero",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "",
@@ -37,6 +37,6 @@ "main": "dist/redux-zero.js",
     "setupFiles": [
-      "<rootDir>/testSetup.js"
+      "<rootDir>/config/testSetup.js"
     ],
     "transform": {
-      "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js"
+      "^.+\\.(ts|tsx)$": "<rootDir>/config/preprocessor.js"
     },
@@ -43,0 +43,0 @@ "testMatch": [

react/index.js

@@ -58,2 +58,21 @@ 'use strict';
 
+function bindActions(actions, store) {
+    var bound = {};
+    var _loop_1 = function (name_1) {
+        bound[name_1] = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var ret = actions[name_1].apply(actions, [store.getState()].concat(args));
+            if (ret != null)
+                store.setState(ret);
+        };
+    };
+    for (var name_1 in actions) {
+        _loop_1(name_1);
+    }
+    return bound;
+}
+
 var Connect = /** @class */ (function (_super) {
@@ -64,2 +83,3 @@ __extends(Connect, _super);
         _this.state = _this.getProps();
+        _this.actions = _this.getActions();
         _this.update = function () {
@@ -84,4 +104,8 @@ var mapped = _this.getProps();
     };
+    Connect.prototype.getActions = function () {
+        var actions = this.props.actions;
+        return bindActions(typeof actions === "function" ? actions(this.context.store) : actions, this.context.store);
+    };
     Connect.prototype.render = function () {
-        return this.props.children(__assign({ store: this.context.store }, this.state));
+        return this.props.children(__assign({ store: this.context.store }, this.state, this.actions));
     };
@@ -93,4 +117,5 @@ Connect.contextTypes = {
 }(React.Component));
-function connect(mapToProps) {
-    return function (Child) { return function (props) { return (React.createElement(Connect, { mapToProps: mapToProps }, function (mappedProps) { return React.createElement(Child, __assign({}, mappedProps, props)); })); }; };
+function connect(mapToProps, actions) {
+    if (actions === void 0) { actions = {}; }
+    return function (Child) { return function (props) { return (React.createElement(Connect, { mapToProps: mapToProps, actions: actions }, function (mappedProps) { return React.createElement(Child, __assign({}, mappedProps, props)); })); }; };
 }
@@ -97,0 +122,0 @@

react/index.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e(t["redux-zero"]={},t.React)}(this,function(t,e){"use strict";function n(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function o(t,e){for(var n in t)if(t[n]!==e[n])return!1;for(var n in e)if(!(n in t))return!1;return!0}function r(t,e,n){return"object"==typeof t?null:new Error("Invalid prop "+e+" supplied to "+n)}var i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},p=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++){e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},s=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state=e.getProps(),e.update=function(){var t=e.getProps();o(t,e.state)||e.setState(t)},e}return n(e,t),e.prototype.componentWillMount=function(){this.unsubscribe=this.context.store.subscribe(this.update)},e.prototype.componentWillUnmount=function(){this.unsubscribe(this.update)},e.prototype.getProps=function(){return(0,this.props.mapToProps)(this.context.store&&this.context.store.getState()||{},this.props)},e.prototype.render=function(){return this.props.children(p({store:this.context.store},this.state))},e.contextTypes={store:r},e}(e.Component),u=function(t){function o(){return null!==t&&t.apply(this,arguments)||this}return n(o,t),o.prototype.getChildContext=function(){return{store:this.props.store}},o.prototype.render=function(){var t=this.props.children;return e.Children.only(t)},o.childContextTypes={store:r},o}(e.Component);t.connect=function(t){return function(n){return function(o){return e.createElement(s,{mapToProps:t},function(t){return e.createElement(n,p({},t,o))})}}},t.Provider=u,t.Connect=s,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n(t["redux-zero"]={},t.React)}(this,function(t,n){"use strict";function e(t,n){function e(){this.constructor=t}s(t,n),t.prototype=null===n?Object.create(n):(e.prototype=n.prototype,new e)}function o(t,n){for(var e in t)if(t[e]!==n[e])return!1;for(var e in n)if(!(e in t))return!1;return!0}function r(t,n,e){return"object"==typeof t?null:new Error("Invalid prop "+n+" supplied to "+e)}function i(t,n){var e={};for(var o in t)!function(o){e[o]=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];var i=t[o].apply(t,[n.getState()].concat(e));null!=i&&n.setState(i)}}(o);return e}var s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])},c=Object.assign||function(t){for(var n,e=1,o=arguments.length;e<o;e++){n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},p=function(t){function n(){var n=null!==t&&t.apply(this,arguments)||this;return n.state=n.getProps(),n.actions=n.getActions(),n.update=function(){var t=n.getProps();o(t,n.state)||n.setState(t)},n}return e(n,t),n.prototype.componentWillMount=function(){this.unsubscribe=this.context.store.subscribe(this.update)},n.prototype.componentWillUnmount=function(){this.unsubscribe(this.update)},n.prototype.getProps=function(){return(0,this.props.mapToProps)(this.context.store&&this.context.store.getState()||{},this.props)},n.prototype.getActions=function(){var t=this.props.actions;return i("function"==typeof t?t(this.context.store):t,this.context.store)},n.prototype.render=function(){return this.props.children(c({store:this.context.store},this.state,this.actions))},n.contextTypes={store:r},n}(n.Component),u=function(t){function o(){return null!==t&&t.apply(this,arguments)||this}return e(o,t),o.prototype.getChildContext=function(){return{store:this.props.store}},o.prototype.render=function(){var t=this.props.children;return n.Children.only(t)},o.childContextTypes={store:r},o}(n.Component);t.connect=function(t,e){return void 0===e&&(e={}),function(o){return function(r){return n.createElement(p,{mapToProps:t,actions:e},function(t){return n.createElement(o,c({},t,r))})}}},t.Provider=u,t.Connect=p,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

react/react/components/connect.d.ts

@@ -9,8 +9,10 @@ /// <reference types="react" />
     state: any;
+    actions: {};
     componentWillMount(): void;
     componentWillUnmount(): void;
     getProps(): any;
+    getActions(): {};
     update: () => void;
     render(): any;
 }
-export default function connect(mapToProps: any): (Child: any) => (props: any) => JSX.Element;
+export default function connect(mapToProps: any, actions?: {}): (Child: any) => (props: any) => JSX.Element;

README.md

@@ -79,17 +79,10 @@ <h1 align="center">
 /* actions.js */
-import store from "./store";
+export const actions = store => ({
+  increment: state => ({ count: state.count + 1 }),
+  decrement: state => ({ count: state.count - 1 })
+})
+```
 
-export const increment = () => {
-  store.setState({
-    count: store.getState().count + 1
-  })
-}
+By the way, because the actions are bound to the store, they are just pure functions :)
 
-export const decrement = () => {
-  store.setState({
-    count: store.getState().count - 1
-  })
-}
-```
-
 Now create your component. With **Redux Zero** your component can focus 100% on the UI and just call the actions that will automatically update the state:
@@ -102,12 +95,12 @@
 
-import { increment, decrement } from "./actions";
+import actions from "./actions";
 
 const mapToProps = ({ count }) => ({ count });
 
-export default connect(mapToProps)(({ count }) => (
+export default connect(mapToProps, actions)(({ count, increment, decrement }) => (
   <div>
     <h1>{count}</h1>
     <div>
+      <button onClick={decrement}>decrement</button>
       <button onClick={increment}>increment</button>
-      <button onClick={decrement}>decrement</button>
     </div>
@@ -114,0 +107,0 @@ </div>

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

35401

increased by15.14%

Number of package files

32

increased by6.67%

Lines of code

292

increased by12.31%

Worsened metrics

Number of lines in readme file

149

decreased by-4.49%

No dependency changes