redux-zero - npm Package Compare versions

Comparing version 5.1.1 to 5.1.2

CHANGELOG.md

 # Changelog
 
+### 5.1.2
+
+- Fix to make sure React's `connect()` components rerender when their props change.
+
 ### 5.1.1
@@ -4,0 +8,0 @@

package.json

 {
   "name": "redux-zero",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/redux-zero.js",

react/components/connect.d.ts

@@ -9,9 +9,8 @@ import * as React from "react";
     unsubscribe: any;
-    state: any;
-    actions: {
-        [x: string]: (...args: any[]) => void | Promise<void>;
-    };
+    actions: any;
+    constructor(props: any, context: any);
     componentWillMount(): void;
     componentWillUnmount(): void;
-    getProps(): any;
+    componentWillReceiveProps(nextProps: any, nextContext: any): void;
+    getProps(props: any, context: any): any;
     getActions(): {
@@ -18,0 +17,0 @@ [x: string]: (...args: any[]) => void | Promise<void>;

react/index.js

@@ -97,8 +97,6 @@ 'use strict';
     __extends(Connect, _super);
-    function Connect() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = _this.getProps();
-        _this.actions = _this.getActions();
+    function Connect(props, context) {
+        var _this = _super.call(this, props, context) || this;
         _this.update = function () {
-            var mapped = _this.getProps();
+            var mapped = _this.getProps(_this.props, _this.context);
             if (!shallowEqual(mapped, _this.state)) {
@@ -108,2 +106,4 @@ _this.setState(mapped);
         };
+        _this.state = _this.getProps(props, context);
+        _this.actions = _this.getActions();
         return _this;
@@ -117,7 +117,13 @@ }
     };
-    Connect.prototype.getProps = function () {
-        var mapToProps = this.props.mapToProps;
-        var state = (this.context.store && this.context.store.getState()) || {};
-        return mapToProps ? mapToProps(state, this.props) : state;
+    Connect.prototype.componentWillReceiveProps = function (nextProps, nextContext) {
+        var mapped = this.getProps(nextProps, nextContext);
+        if (!shallowEqual(mapped, this.state)) {
+            this.setState(mapped);
+        }
     };
+    Connect.prototype.getProps = function (props, context) {
+        var mapToProps = props.mapToProps;
+        var state = (context.store && context.store.getState()) || {};
+        return mapToProps ? mapToProps(state, props) : state;
+    };
     Connect.prototype.getActions = function () {
@@ -124,0 +130,0 @@ var actions = this.props.actions;

react/index.min.js

@@ -1,1 +0,1 @@
-!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,s){"use strict";var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};function i(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var u=function(){return(u=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function e(t,e,r){return"object"==typeof t?null:new Error("Invalid prop "+e+" supplied to "+r)}function c(r,n){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return"function"==typeof n.middleware?n.middleware(n,r,t):function(t,e){if(null!=e){if(e.then)return e.then(t.setState);t.setState(e)}}(n,r.apply(void 0,[n.getState()].concat(t)))}}var r,p=(i(o,r=s.Component),o.prototype.componentWillMount=function(){this.unsubscribe=this.context.store.subscribe(this.update)},o.prototype.componentWillUnmount=function(){this.unsubscribe(this.update)},o.prototype.getProps=function(){var t=this.props.mapToProps,e=this.context.store&&this.context.store.getState()||{};return t?t(e,this.props):e},o.prototype.getActions=function(){return function(t,e,r){t="function"==typeof t?t(e,r):t;var n={};for(var o in t){var i=t[o];n[o]=c(i,e)}return n}(this.props.actions,this.context.store,this.props)},o.prototype.render=function(){return this.props.children(u({store:this.context.store},this.state,this.actions))},o.contextTypes={store:e},o);function o(){var e=null!==r&&r.apply(this,arguments)||this;return e.state=e.getProps(),e.actions=e.getActions(),e.update=function(){var t=e.getProps();!function(t,e){for(var r in t)if(t[r]!==e[r])return!1;for(var r in e)if(!(r in t))return!1;return!0}(t,e.state)&&e.setState(t)},e}var a,f="createContext"in s?s.createContext(void 0):{Provider:function(t){var e=t.children;return s.Children.only(e)}},h=(i(l,a=s.Component),l.prototype.getChildContext=function(){return{store:this.props.store}},l.prototype.render=function(){var t=this.props,e=t.store,r=t.children;return s.createElement(f.Provider,{value:e},r)},l.childContextTypes={store:e},l);function l(){return null!==a&&a.apply(this,arguments)||this}function d(){return s.useContext(f)}var v="undefined"!=typeof window?s.useLayoutEffect:s.useEffect;t.connect=function(n,o){return void 0===o&&(o={}),function(r){return i(t,e=s.Component),t.prototype.render=function(){var e=this.props;return s.createElement(p,u({},e,{mapToProps:n,actions:o}),function(t){return s.createElement(r,u({},t,e))})},t;function t(){return null!==e&&e.apply(this,arguments)||this}var e}},t.Provider=h,t.Connect=p,t.useStore=d,t.useSelector=function(t){var e,r=d(),n=s.useReducer(function(t){return t+1},0)[1],o=s.useRef(void 0),i=s.useRef(void 0),u=s.useRef(void 0);try{e=o.current!==t||u.current?t(r.getState()):i.current}catch(t){var c="An error occurred while selecting the store state: "+t.message+".";throw u.current&&(c+="\nThe error may be related with this previous error:\n"+u.current.stack+"\n\nOriginal stack trace:"),new Error(c)}return v(function(){o.current=t,i.current=e,u.current=void 0}),v(function(){function t(){try{var t=o.current(r.getState());if(t===i.current)return;i.current=t}catch(t){u.current=t}n({})}var e=r.subscribe(t);return t(),function(){return e()}},[r]),e},t.useAction=function(t){var e=d();return s.useMemo(function(){return c(t,e)},[e,t])},Object.defineProperty(t,"__esModule",{value:!0})});
+!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,s){"use strict";var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};function i(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var u=function(){return(u=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function o(t,e){for(var r in t)if(t[r]!==e[r])return!1;for(var r in e)if(!(r in t))return!1;return!0}function e(t,e,r){return"object"==typeof t?null:new Error("Invalid prop "+e+" supplied to "+r)}function c(r,n){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return"function"==typeof n.middleware?n.middleware(n,r,t):function(t,e){if(null!=e){if(e.then)return e.then(t.setState);t.setState(e)}}(n,r.apply(void 0,[n.getState()].concat(t)))}}var p,a=(i(r,p=s.Component),r.prototype.componentWillMount=function(){this.unsubscribe=this.context.store.subscribe(this.update)},r.prototype.componentWillUnmount=function(){this.unsubscribe(this.update)},r.prototype.componentWillReceiveProps=function(t,e){var r=this.getProps(t,e);o(r,this.state)||this.setState(r)},r.prototype.getProps=function(t,e){var r=t.mapToProps,n=e.store&&e.store.getState()||{};return r?r(n,t):n},r.prototype.getActions=function(){return function(t,e,r){t="function"==typeof t?t(e,r):t;var n={};for(var o in t){var i=t[o];n[o]=c(i,e)}return n}(this.props.actions,this.context.store,this.props)},r.prototype.render=function(){return this.props.children(u({store:this.context.store},this.state,this.actions))},r.contextTypes={store:e},r);function r(t,e){var r=p.call(this,t,e)||this;return r.update=function(){var t=r.getProps(r.props,r.context);o(t,r.state)||r.setState(t)},r.state=r.getProps(t,e),r.actions=r.getActions(),r}var f,l="createContext"in s?s.createContext(void 0):{Provider:function(t){var e=t.children;return s.Children.only(e)}},h=(i(d,f=s.Component),d.prototype.getChildContext=function(){return{store:this.props.store}},d.prototype.render=function(){var t=this.props,e=t.store,r=t.children;return s.createElement(l.Provider,{value:e},r)},d.childContextTypes={store:e},d);function d(){return null!==f&&f.apply(this,arguments)||this}function v(){return s.useContext(l)}var y="undefined"!=typeof window?s.useLayoutEffect:s.useEffect;t.connect=function(n,o){return void 0===o&&(o={}),function(r){return i(t,e=s.Component),t.prototype.render=function(){var e=this.props;return s.createElement(a,u({},e,{mapToProps:n,actions:o}),function(t){return s.createElement(r,u({},t,e))})},t;function t(){return null!==e&&e.apply(this,arguments)||this}var e}},t.Provider=h,t.Connect=a,t.useStore=v,t.useSelector=function(t){var e,r=v(),n=s.useReducer(function(t){return t+1},0)[1],o=s.useRef(void 0),i=s.useRef(void 0),u=s.useRef(void 0);try{e=o.current!==t||u.current?t(r.getState()):i.current}catch(t){var c="An error occurred while selecting the store state: "+t.message+".";throw u.current&&(c+="\nThe error may be related with this previous error:\n"+u.current.stack+"\n\nOriginal stack trace:"),new Error(c)}return y(function(){o.current=t,i.current=e,u.current=void 0}),y(function(){function t(){try{var t=o.current(r.getState());if(t===i.current)return;i.current=t}catch(t){u.current=t}n({})}var e=r.subscribe(t);return t(),function(){return e()}},[r]),e},t.useAction=function(t){var e=v();return s.useMemo(function(){return c(t,e)},[e,t])},Object.defineProperty(t,"__esModule",{value:!0})});

README.md

@@ -339,4 +339,5 @@ <h1 align="center">
 
-const logger = store => next => action => {
+const logger = store => (next, args) => action => {
   console.log("current state", store.getState());
+  console.log("action", action.name, ...args);
   return next(action);
@@ -343,0 +344,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

79787

increased by0.72%

Lines of code

1172

increased by0.43%

Number of lines in readme file

437

increased by0.23%

No dependency changes