Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-redux

Package Overview
Dependencies
Maintainers
1
Versions
140
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-redux - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

6

dist/react-redux.js

@@ -189,2 +189,4 @@ (function webpackUniversalModuleDefinition(root, factory) {

return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
var options = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var shouldSubscribe = Boolean(mapStateToProps);

@@ -196,2 +198,4 @@ var finalMapStateToProps = mapStateToProps || defaultMapStateToProps;

var shouldUpdateDispatchProps = finalMapDispatchToProps.length > 1;
var _options$pure = options.pure;
var pure = _options$pure === undefined ? true : _options$pure;

@@ -229,3 +233,3 @@ // Helps track hot reloading.

Connect.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return !_utilsShallowEqual2['default'](this.state.props, nextState.props);
return !pure || !_utilsShallowEqual2['default'](this.state.props, nextState.props);
};

@@ -232,0 +236,0 @@

2

dist/react-redux.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("redux")):"function"==typeof define&&define.amd?define(["react","redux"],e):"object"==typeof exports?exports.ReactRedux=e(require("react"),require("redux")):t.ReactRedux=e(t.React,t.Redux)}(this,function(t,e){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=r(9),u=n(o),i=r(2),s=n(i),a=s.default(u.default),c=a.Provider,p=a.connect;e.Provider=c,e.connect=p},function(t,e){"use strict";function r(t){return t.shape({subscribe:t.func.isRequired,dispatch:t.func.isRequired,getState:t.func.isRequired})}e.__esModule=!0,e.default=r,t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t){var e=i.default(t),r=a.default(t);return{Provider:e,connect:r}}e.__esModule=!0,e.default=o;var u=r(4),i=n(u),s=r(3),a=n(s);t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function i(t){return t.displayName||t.name||"Component"}function s(t){var e=t.Component,r=t.PropTypes,n=f.default(r);return function(r,s,p){function f(t,e){var r=t.getState(),n=R?m(r,e):m(r);return g.default(y.default(n),"`mapStateToProps` must return an object. Instead received %s.",n),n}function l(t,e){var r=t.dispatch,n=S?j(r,e):j(r);return g.default(y.default(n),"`mapDispatchToProps` must return an object. Instead received %s.",n),n}function h(t,e,r){var n=O(t,e,r);return g.default(y.default(n),"`mergeProps` must return an object. Instead received %s.",n),n}var b=Boolean(r),m=r||x,j=y.default(s)?v.default(s):s||P,O=p||_,R=m.length>1,S=j.length>1,C=w++;return function(r){var s=function(e){function s(t,r){o(this,s),e.call(this,t,r),this.version=C,this.store=t.store||r.store,g.default(this.store,'Could not find "store" in either the context or '+('props of "'+this.constructor.displayName+'". ')+"Either wrap the root component in a <Provider>, "+('or explicitly pass "store" as a prop to "'+this.constructor.displayName+'".')),this.stateProps=f(this.store,t),this.dispatchProps=l(this.store,t),this.state={props:this.computeNextState()}}return u(s,e),s.prototype.shouldComponentUpdate=function(t,e){return!d.default(this.state.props,e.props)},a(s,null,[{key:"displayName",value:"Connect("+i(r)+")",enumerable:!0},{key:"WrappedComponent",value:r,enumerable:!0},{key:"contextTypes",value:{store:n},enumerable:!0},{key:"propTypes",value:{store:n},enumerable:!0}]),s.prototype.computeNextState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];return h(this.stateProps,this.dispatchProps,t)},s.prototype.updateStateProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=f(this.store,t);return d.default(e,this.stateProps)?!1:(this.stateProps=e,!0)},s.prototype.updateDispatchProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=l(this.store,t);return d.default(e,this.dispatchProps)?!1:(this.dispatchProps=e,!0)},s.prototype.updateState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=this.computeNextState(t);d.default(e,this.state.props)||this.setState({props:e})},s.prototype.isSubscribed=function(){return"function"==typeof this.unsubscribe},s.prototype.trySubscribe=function(){b&&!this.unsubscribe&&(this.unsubscribe=this.store.subscribe(this.handleChange.bind(this)),this.handleChange())},s.prototype.tryUnsubscribe=function(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)},s.prototype.componentDidMount=function(){this.trySubscribe()},s.prototype.componentWillReceiveProps=function(t){d.default(t,this.props)||(R&&this.updateStateProps(t),S&&this.updateDispatchProps(t),this.updateState(t))},s.prototype.componentWillUnmount=function(){this.tryUnsubscribe()},s.prototype.handleChange=function(){this.updateStateProps()&&this.updateState()},s.prototype.getWrappedInstance=function(){return this.refs.wrappedInstance},s.prototype.render=function(){return t.createElement(r,c({ref:"wrappedInstance"},this.state.props))},s}(e);return s}}}e.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t};e.default=s;var p=r(1),f=n(p),l=r(6),d=n(l),h=r(5),y=n(h),b=r(7),v=n(b),m=r(8),g=n(m),x=function(){return{}},P=function(t){return{dispatch:t}},_=function(t,e,r){return c({},r,t,e)},w=0;t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function i(t){var e=t.version;if("string"!=typeof e)return!0;var r=e.split("."),n=parseInt(r[0],10),o=parseInt(r[1],10);return 0===n&&13===o}function s(t){function e(){h||d||(h=!0,console.error("With React 0.14 and later versions, you no longer need to wrap <Provider> child into a function."))}function r(){!h&&d&&(h=!0,console.error("With React 0.13, you need to wrap <Provider> child into a function. This restriction will be removed with React 0.14."))}function n(){y||(y=!0,console.error("<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/rackt/react-redux/releases/tag/v2.0.0 for the migration instructions."))}var s=t.Component,c=t.PropTypes,f=t.Children,l=p.default(c),d=i(t),h=!1,y=!1;return function(t){function i(e,r){o(this,i),t.call(this,e,r),this.store=e.store}return u(i,t),i.prototype.getChildContext=function(){return{store:this.store}},a(i,null,[{key:"childContextTypes",value:{store:l.isRequired},enumerable:!0},{key:"propTypes",value:{store:l.isRequired,children:(d?c.func:c.element).isRequired},enumerable:!0}]),i.prototype.componentWillReceiveProps=function(t){var e=this.store,r=t.store;e!==r&&n()},i.prototype.render=function(){var t=this.props.children;return"function"==typeof t?(e(),t=t()):r(),f.only(t)},i}(s)}e.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}();e.default=s;var c=r(1),p=n(c);t.exports=e.default},function(t,e){"use strict";function r(t){if(!t||"object"!=typeof t)return!1;var e="function"==typeof t.constructor?Object.getPrototypeOf(t):Object.prototype;if(null===e)return!0;var r=e.constructor;return"function"==typeof r&&r instanceof r&&n(r)===n(Object)}e.__esModule=!0,e.default=r;var n=function(t){return Function.prototype.toString.call(t)};t.exports=e.default},function(t,e){"use strict";function r(t,e){if(t===e)return!0;var r=Object.keys(t),n=Object.keys(e);if(r.length!==n.length)return!1;for(var o=Object.prototype.hasOwnProperty,u=0;u<r.length;u++)if(!o.call(e,r[u])||t[r[u]]!==e[r[u]])return!1;return!0}e.__esModule=!0,e.default=r,t.exports=e.default},function(t,e,r){"use strict";function n(t){return function(e){return o.bindActionCreators(t,e)}}e.__esModule=!0,e.default=n;var o=r(10);t.exports=e.default},function(t,e,r){"use strict";var n=function(t,e,r,n,o,u,i,s){if(!t){var a;if(void 0===e)a=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,n,o,u,i,s],p=0;a=new Error("Invariant Violation: "+e.replace(/%s/g,function(){return c[p++]}))}throw a.framesToPop=1,a}};t.exports=n},function(e,r){e.exports=t},function(t,r){t.exports=e}])});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("redux")):"function"==typeof define&&define.amd?define(["react","redux"],e):"object"==typeof exports?exports.ReactRedux=e(require("react"),require("redux")):t.ReactRedux=e(t.React,t.Redux)}(this,function(t,e){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=r(9),u=n(o),s=r(2),i=n(s),a=i.default(u.default),c=a.Provider,p=a.connect;e.Provider=c,e.connect=p},function(t,e){"use strict";function r(t){return t.shape({subscribe:t.func.isRequired,dispatch:t.func.isRequired,getState:t.func.isRequired})}e.__esModule=!0,e.default=r,t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t){var e=s.default(t),r=a.default(t);return{Provider:e,connect:r}}e.__esModule=!0,e.default=o;var u=r(4),s=n(u),i=r(3),a=n(i);t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t){return t.displayName||t.name||"Component"}function i(t){var e=t.Component,r=t.PropTypes,n=f.default(r);return function(r,i,p){function f(t,e){var r=t.getState(),n=S?j(r,e):j(r);return g.default(y.default(n),"`mapStateToProps` must return an object. Instead received %s.",n),n}function l(t,e){var r=t.dispatch,n=C?O(r,e):O(r);return g.default(y.default(n),"`mapDispatchToProps` must return an object. Instead received %s.",n),n}function h(t,e,r){var n=R(t,e,r);return g.default(y.default(n),"`mergeProps` must return an object. Instead received %s.",n),n}var v=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],m=Boolean(r),j=r||x,O=y.default(i)?b.default(i):i||P,R=p||_,S=j.length>1,C=O.length>1,M=v.pure,T=void 0===M?!0:M,k=w++;return function(r){var i=function(e){function i(t,r){o(this,i),e.call(this,t,r),this.version=k,this.store=t.store||r.store,g.default(this.store,'Could not find "store" in either the context or '+('props of "'+this.constructor.displayName+'". ')+"Either wrap the root component in a <Provider>, "+('or explicitly pass "store" as a prop to "'+this.constructor.displayName+'".')),this.stateProps=f(this.store,t),this.dispatchProps=l(this.store,t),this.state={props:this.computeNextState()}}return u(i,e),i.prototype.shouldComponentUpdate=function(t,e){return!T||!d.default(this.state.props,e.props)},a(i,null,[{key:"displayName",value:"Connect("+s(r)+")",enumerable:!0},{key:"WrappedComponent",value:r,enumerable:!0},{key:"contextTypes",value:{store:n},enumerable:!0},{key:"propTypes",value:{store:n},enumerable:!0}]),i.prototype.computeNextState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];return h(this.stateProps,this.dispatchProps,t)},i.prototype.updateStateProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=f(this.store,t);return d.default(e,this.stateProps)?!1:(this.stateProps=e,!0)},i.prototype.updateDispatchProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=l(this.store,t);return d.default(e,this.dispatchProps)?!1:(this.dispatchProps=e,!0)},i.prototype.updateState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=this.computeNextState(t);d.default(e,this.state.props)||this.setState({props:e})},i.prototype.isSubscribed=function(){return"function"==typeof this.unsubscribe},i.prototype.trySubscribe=function(){m&&!this.unsubscribe&&(this.unsubscribe=this.store.subscribe(this.handleChange.bind(this)),this.handleChange())},i.prototype.tryUnsubscribe=function(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)},i.prototype.componentDidMount=function(){this.trySubscribe()},i.prototype.componentWillReceiveProps=function(t){d.default(t,this.props)||(S&&this.updateStateProps(t),C&&this.updateDispatchProps(t),this.updateState(t))},i.prototype.componentWillUnmount=function(){this.tryUnsubscribe()},i.prototype.handleChange=function(){this.updateStateProps()&&this.updateState()},i.prototype.getWrappedInstance=function(){return this.refs.wrappedInstance},i.prototype.render=function(){return t.createElement(r,c({ref:"wrappedInstance"},this.state.props))},i}(e);return i}}}e.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t};e.default=i;var p=r(1),f=n(p),l=r(6),d=n(l),h=r(5),y=n(h),v=r(7),b=n(v),m=r(8),g=n(m),x=function(){return{}},P=function(t){return{dispatch:t}},_=function(t,e,r){return c({},r,t,e)},w=0;t.exports=e.default},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t){var e=t.version;if("string"!=typeof e)return!0;var r=e.split("."),n=parseInt(r[0],10),o=parseInt(r[1],10);return 0===n&&13===o}function i(t){function e(){h||d||(h=!0,console.error("With React 0.14 and later versions, you no longer need to wrap <Provider> child into a function."))}function r(){!h&&d&&(h=!0,console.error("With React 0.13, you need to wrap <Provider> child into a function. This restriction will be removed with React 0.14."))}function n(){y||(y=!0,console.error("<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/rackt/react-redux/releases/tag/v2.0.0 for the migration instructions."))}var i=t.Component,c=t.PropTypes,f=t.Children,l=p.default(c),d=s(t),h=!1,y=!1;return function(t){function s(e,r){o(this,s),t.call(this,e,r),this.store=e.store}return u(s,t),s.prototype.getChildContext=function(){return{store:this.store}},a(s,null,[{key:"childContextTypes",value:{store:l.isRequired},enumerable:!0},{key:"propTypes",value:{store:l.isRequired,children:(d?c.func:c.element).isRequired},enumerable:!0}]),s.prototype.componentWillReceiveProps=function(t){var e=this.store,r=t.store;e!==r&&n()},s.prototype.render=function(){var t=this.props.children;return"function"==typeof t?(e(),t=t()):r(),f.only(t)},s}(i)}e.__esModule=!0;var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}();e.default=i;var c=r(1),p=n(c);t.exports=e.default},function(t,e){"use strict";function r(t){if(!t||"object"!=typeof t)return!1;var e="function"==typeof t.constructor?Object.getPrototypeOf(t):Object.prototype;if(null===e)return!0;var r=e.constructor;return"function"==typeof r&&r instanceof r&&n(r)===n(Object)}e.__esModule=!0,e.default=r;var n=function(t){return Function.prototype.toString.call(t)};t.exports=e.default},function(t,e){"use strict";function r(t,e){if(t===e)return!0;var r=Object.keys(t),n=Object.keys(e);if(r.length!==n.length)return!1;for(var o=Object.prototype.hasOwnProperty,u=0;u<r.length;u++)if(!o.call(e,r[u])||t[r[u]]!==e[r[u]])return!1;return!0}e.__esModule=!0,e.default=r,t.exports=e.default},function(t,e,r){"use strict";function n(t){return function(e){return o.bindActionCreators(t,e)}}e.__esModule=!0,e.default=n;var o=r(10);t.exports=e.default},function(t,e,r){"use strict";var n=function(t,e,r,n,o,u,s,i){if(!t){var a;if(void 0===e)a=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,n,o,u,s,i],p=0;a=new Error("Invariant Violation: "+e.replace(/%s/g,function(){return c[p++]}))}throw a.framesToPop=1,a}};t.exports=n},function(e,r){e.exports=t},function(t,r){t.exports=e}])});

6

lib/components/createConnect.js

@@ -61,2 +61,4 @@ 'use strict';

return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
var options = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var shouldSubscribe = Boolean(mapStateToProps);

@@ -68,2 +70,4 @@ var finalMapStateToProps = mapStateToProps || defaultMapStateToProps;

var shouldUpdateDispatchProps = finalMapDispatchToProps.length > 1;
var _options$pure = options.pure;
var pure = _options$pure === undefined ? true : _options$pure;

@@ -101,3 +105,3 @@ // Helps track hot reloading.

Connect.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return !_utilsShallowEqual2['default'](this.state.props, nextState.props);
return !pure || !_utilsShallowEqual2['default'](this.state.props, nextState.props);
};

@@ -104,0 +108,0 @@

2

package.json
{
"name": "react-redux",
"version": "2.0.0",
"version": "2.1.0",
"description": "Official React bindings for Redux",

@@ -5,0 +5,0 @@ "main": "./lib/index.js",

45

README.md

@@ -11,5 +11,2 @@ React Redux

>**Note: There is a project called `redux-react` on NPM that is [completely unrelated](https://github.com/cgarvis/redux-react/issues/1) to the official bindings. This documentation (and any other official Redux documentation) is for `react-redux`.**
## Table of Contents

@@ -22,3 +19,3 @@

- [`<Provider store>`](#provider-store)
- [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps])`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops)
- [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
- [Troubleshooting](#troubleshooting)

@@ -33,5 +30,2 @@ - [License](#license)

Be careful! **“React” goes first.**
There is a project called `redux-react`, but it is [completely unrelated](https://github.com/cgarvis/redux-react/issues/1).
React Redux requires **React 0.13 or later.**

@@ -238,6 +232,9 @@

### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps])`
### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
Connects a React component to a Redux store.
It does not modify the component class passed to it.
Instead, it *returns* a new, connected component class, for you to use.
#### Arguments

@@ -251,2 +248,5 @@

* [`options`] *(Object)* If specified, further customizes the behavior of the connector.
* [`pure`] *(Boolean)*: If true, implements `shouldComponentUpdate` and shallowly compares the result of `mergeProps`, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. *Defaults to `true`.*
#### Returns

@@ -260,2 +260,4 @@

* It does not modify the passed React component. It returns a new, connected component, that you should use instead.
* The `mapStateToProps` function takes a single argument of the entire Redux store’s state and returns an object to be passed as props. It is often called a **selector**. Use [reselect](https://github.com/faassen/reselect) to efficiently compose selectors and [compute derived data](http://gaearon.github.io/redux/docs/recipes/ComputingDerivedData.html).

@@ -276,3 +278,4 @@

>Don’t do this! It kills any performance optimisations because `TodoApp` will rerender after every action.
>It’s better to have more granular `connect()` on several components in your view hierarchy.
>It’s better to have more granular `connect()` on several components in your view hierarchy that each only
>listen to a relevant slice of the state.

@@ -470,2 +473,24 @@ ```js

### My views aren't updating when something changes outside of Redux
If your views depend on global state or [React “context”](www.youtube.com/watch?v=H7vlH-wntD4), you might find that views decorated with `connect()` will fail to update.
>This is because `connect()` implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React's [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html).
The _best_ solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
If that's not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`:
```
function mapStateToProps(state) {
return { todos: state.todos };
}
export default connect(mapStateToProps, null, null, {
pure: false
})(TodoApp);
```
This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.
### Could not find "store" in either the context or props

@@ -477,3 +502,3 @@

2. Make sure you didn’t forget to wrap your root component in [`<Provider>`](#provider-store).
3. If you use React Router, something like `<Provider>{() => routes}</Provider>` won’t work. Due to the way context works in React 0.13, it’s important that the `<Provider>` children are *created* inside that function. Just referencing an outside variable doesn’t do the trick. Instead of `<Provider>{() => routes}</Provider>`, write `<Provider>{createRoutes}</Provider>` where `createRoutes()` is a function that actually *creates* (and returns) the route configuration.
3. If you use React Router, something like `<Provider>{() => router}</Provider>` won’t work. Due to the way context works in React 0.13, it’s important that the `<Provider>` children are *created* inside that function. Just referencing an outside variable doesn’t do the trick. Instead of `<Provider>{() => router}</Provider>`, write `<Provider>{() => createRouter()}</Provider>` where `createRouter()` is a function that actually *creates* (and returns) the router.

@@ -480,0 +505,0 @@ ### Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner

49

test/components/connect.spec.js

@@ -1067,3 +1067,52 @@ import expect from 'expect';

});
it('should wrap impure components without supressing updates', () => {
const store = createStore(() => ({}));
class ImpureComponent extends Component {
static contextTypes = {
statefulValue: React.PropTypes.number
};
render() {
return <Passthrough statefulValue={this.context.statefulValue} />;
}
}
const decorator = connect(state => state, null, null, { pure: false });
const Decorated = decorator(ImpureComponent);
class StatefulWrapper extends Component {
state = {
value: 0
};
static childContextTypes = {
statefulValue: React.PropTypes.number
};
getChildContext() {
return {
statefulValue: this.state.value
};
}
render() {
return <Decorated />;
};
}
const tree = TestUtils.renderIntoDocument(
<ProviderMock store={store}>
<StatefulWrapper />
</ProviderMock>
);
const target = TestUtils.findRenderedComponentWithType(tree, Passthrough);
const wrapper = TestUtils.findRenderedComponentWithType(tree, StatefulWrapper);
expect(target.props.statefulValue).toEqual(0);
wrapper.setState({ value: 1 });
expect(target.props.statefulValue).toEqual(1);
});
});
});
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc