Socket
Socket
Sign inDemoInstall

react-redux

Package Overview
Dependencies
4
Maintainers
1
Versions
140
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.1.0 to 4.0.0

lib/components/connect.js
lib/components/Provider.js
lib/utils/storeShape.js

2

CHANGELOG.md

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

All notable changes are described on the [Releases](https://github.com/gaearon/react-redux/releases) page.
All notable changes are described on the [Releases](https://github.com/rackt/react-redux/releases) page.

562

dist/react-redux.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

root["ReactRedux"] = factory(root["React"], root["Redux"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__) {
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_10__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -62,19 +62,12 @@ /******/ // The module cache

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _interopRequire(obj) { return obj && obj.__esModule ? obj['default'] : obj; }
var _react = __webpack_require__(10);
var _componentsProvider = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
exports.Provider = _interopRequire(_componentsProvider);
var _componentsCreateAll = __webpack_require__(2);
var _componentsConnect = __webpack_require__(4);
var _componentsCreateAll2 = _interopRequireDefault(_componentsCreateAll);
exports.connect = _interopRequire(_componentsConnect);
var _createAll = _componentsCreateAll2['default'](_react2['default']);
var Provider = _createAll.Provider;
var connect = _createAll.connect;
exports.Provider = Provider;
exports.connect = connect;
/***/ },

@@ -84,19 +77,23 @@ /* 1 */

"use strict";
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports["default"] = createStoreShape;
function createStoreShape(PropTypes) {
return PropTypes.shape({
subscribe: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
getState: PropTypes.func.isRequired
});
}
var _react = __webpack_require__(1);
module.exports = exports["default"];
exports['default'] = _react.PropTypes.shape({
subscribe: _react.PropTypes.func.isRequired,
dispatch: _react.PropTypes.func.isRequired,
getState: _react.PropTypes.func.isRequired
});
module.exports = exports['default'];
/***/ },
/* 2 */
/* 3 */
/***/ function(module, exports, __webpack_require__) {

@@ -107,25 +104,71 @@

exports.__esModule = true;
exports['default'] = createAll;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _createProvider = __webpack_require__(4);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _createProvider2 = _interopRequireDefault(_createProvider);
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _createConnect = __webpack_require__(3);
var _react = __webpack_require__(1);
var _createConnect2 = _interopRequireDefault(_createConnect);
var _utilsStoreShape = __webpack_require__(2);
function createAll(React) {
var Provider = _createProvider2['default'](React);
var connect = _createConnect2['default'](React);
var _utilsStoreShape2 = _interopRequireDefault(_utilsStoreShape);
return { Provider: Provider, connect: connect };
var didWarnAboutReceivingStore = false;
function warnAboutReceivingStore() {
if (didWarnAboutReceivingStore) {
return;
}
didWarnAboutReceivingStore = true;
console.error( // eslint-disable-line no-console
'<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 Provider = (function (_Component) {
_inherits(Provider, _Component);
Provider.prototype.getChildContext = function getChildContext() {
return { store: this.store };
};
function Provider(props, context) {
_classCallCheck(this, Provider);
_Component.call(this, props, context);
this.store = props.store;
}
Provider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var store = this.store;
var nextStore = nextProps.store;
if (store !== nextStore) {
warnAboutReceivingStore();
}
};
Provider.prototype.render = function render() {
var children = this.props.children;
return _react.Children.only(children);
};
return Provider;
})(_react.Component);
exports['default'] = Provider;
Provider.propTypes = {
store: _utilsStoreShape2['default'].isRequired,
children: _react.PropTypes.element.isRequired
};
Provider.childContextTypes = {
store: _utilsStoreShape2['default'].isRequired
};
module.exports = exports['default'];
/***/ },
/* 3 */
/* 4 */
/***/ function(module, exports, __webpack_require__) {

@@ -139,3 +182,3 @@

exports['default'] = createConnect;
exports['default'] = connect;

@@ -148,6 +191,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _utilsCreateStoreShape = __webpack_require__(1);
var _react = __webpack_require__(1);
var _utilsCreateStoreShape2 = _interopRequireDefault(_utilsCreateStoreShape);
var _react2 = _interopRequireDefault(_react);
var _utilsStoreShape = __webpack_require__(2);
var _utilsStoreShape2 = _interopRequireDefault(_utilsStoreShape);
var _utilsShallowEqual = __webpack_require__(6);

@@ -183,4 +230,4 @@

function getDisplayName(Component) {
return Component.displayName || Component.name || 'Component';
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

@@ -191,331 +238,204 @@

function createConnect(React) {
var Component = React.Component;
var PropTypes = React.PropTypes;
function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
var options = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
var storeShape = _utilsCreateStoreShape2['default'](PropTypes);
var shouldSubscribe = Boolean(mapStateToProps);
var finalMapStateToProps = mapStateToProps || defaultMapStateToProps;
var finalMapDispatchToProps = _utilsIsPlainObject2['default'](mapDispatchToProps) ? _utilsWrapActionCreators2['default'](mapDispatchToProps) : mapDispatchToProps || defaultMapDispatchToProps;
var finalMergeProps = mergeProps || defaultMergeProps;
var shouldUpdateStateProps = finalMapStateToProps.length > 1;
var shouldUpdateDispatchProps = finalMapDispatchToProps.length > 1;
var _options$pure = options.pure;
var pure = _options$pure === undefined ? true : _options$pure;
var _options$withRef = options.withRef;
var withRef = _options$withRef === undefined ? false : _options$withRef;
return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
var options = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
// Helps track hot reloading.
var version = nextVersion++;
var shouldSubscribe = Boolean(mapStateToProps);
var finalMapStateToProps = mapStateToProps || defaultMapStateToProps;
var finalMapDispatchToProps = _utilsIsPlainObject2['default'](mapDispatchToProps) ? _utilsWrapActionCreators2['default'](mapDispatchToProps) : mapDispatchToProps || defaultMapDispatchToProps;
var finalMergeProps = mergeProps || defaultMergeProps;
var shouldUpdateStateProps = finalMapStateToProps.length > 1;
var shouldUpdateDispatchProps = finalMapDispatchToProps.length > 1;
var _options$pure = options.pure;
var pure = _options$pure === undefined ? true : _options$pure;
function computeStateProps(store, props) {
var state = store.getState();
var stateProps = shouldUpdateStateProps ? finalMapStateToProps(state, props) : finalMapStateToProps(state);
// Helps track hot reloading.
var version = nextVersion++;
_invariant2['default'](_utilsIsPlainObject2['default'](stateProps), '`mapStateToProps` must return an object. Instead received %s.', stateProps);
return stateProps;
}
function computeStateProps(store, props) {
var state = store.getState();
var stateProps = shouldUpdateStateProps ? finalMapStateToProps(state, props) : finalMapStateToProps(state);
function computeDispatchProps(store, props) {
var dispatch = store.dispatch;
_invariant2['default'](_utilsIsPlainObject2['default'](stateProps), '`mapStateToProps` must return an object. Instead received %s.', stateProps);
return stateProps;
}
var dispatchProps = shouldUpdateDispatchProps ? finalMapDispatchToProps(dispatch, props) : finalMapDispatchToProps(dispatch);
function computeDispatchProps(store, props) {
var dispatch = store.dispatch;
_invariant2['default'](_utilsIsPlainObject2['default'](dispatchProps), '`mapDispatchToProps` must return an object. Instead received %s.', dispatchProps);
return dispatchProps;
}
var dispatchProps = shouldUpdateDispatchProps ? finalMapDispatchToProps(dispatch, props) : finalMapDispatchToProps(dispatch);
function _computeNextState(stateProps, dispatchProps, parentProps) {
var mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps);
_invariant2['default'](_utilsIsPlainObject2['default'](mergedProps), '`mergeProps` must return an object. Instead received %s.', mergedProps);
return mergedProps;
}
_invariant2['default'](_utilsIsPlainObject2['default'](dispatchProps), '`mapDispatchToProps` must return an object. Instead received %s.', dispatchProps);
return dispatchProps;
}
return function wrapWithConnect(WrappedComponent) {
var Connect = (function (_Component) {
_inherits(Connect, _Component);
function _computeNextState(stateProps, dispatchProps, parentProps) {
var mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps);
_invariant2['default'](_utilsIsPlainObject2['default'](mergedProps), '`mergeProps` must return an object. Instead received %s.', mergedProps);
return mergedProps;
}
Connect.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
if (!pure) {
this.updateStateProps(nextProps);
this.updateDispatchProps(nextProps);
this.updateState(nextProps);
return true;
}
return function wrapWithConnect(WrappedComponent) {
var Connect = (function (_Component) {
_inherits(Connect, _Component);
var storeChanged = nextState.storeState !== this.state.storeState;
var propsChanged = !_utilsShallowEqual2['default'](nextProps, this.props);
var mapStateProducedChange = false;
var dispatchPropsChanged = false;
Connect.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
if (!pure) {
this.updateStateProps(nextProps);
this.updateDispatchProps(nextProps);
this.updateState(nextProps);
return true;
}
if (storeChanged || propsChanged && shouldUpdateStateProps) {
mapStateProducedChange = this.updateStateProps(nextProps);
}
var storeChanged = nextState.storeState !== this.state.storeState;
var propsChanged = !_utilsShallowEqual2['default'](nextProps, this.props);
var mapStateProducedChange = false;
var dispatchPropsChanged = false;
if (storeChanged || propsChanged && shouldUpdateStateProps) {
mapStateProducedChange = this.updateStateProps(nextProps);
}
if (propsChanged && shouldUpdateDispatchProps) {
dispatchPropsChanged = this.updateDispatchProps(nextProps);
}
if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps);
return true;
}
return false;
};
function Connect(props, context) {
_classCallCheck(this, Connect);
_Component.call(this, props, context);
this.version = version;
this.store = props.store || context.store;
_invariant2['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 = computeStateProps(this.store, props);
this.dispatchProps = computeDispatchProps(this.store, props);
this.state = { storeState: null };
this.updateState();
if (propsChanged && shouldUpdateDispatchProps) {
dispatchPropsChanged = this.updateDispatchProps(nextProps);
}
Connect.prototype.computeNextState = function computeNextState() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
return _computeNextState(this.stateProps, this.dispatchProps, props);
};
Connect.prototype.updateStateProps = function updateStateProps() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
var nextStateProps = computeStateProps(this.store, props);
if (_utilsShallowEqual2['default'](nextStateProps, this.stateProps)) {
return false;
}
this.stateProps = nextStateProps;
if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps);
return true;
};
}
Connect.prototype.updateDispatchProps = function updateDispatchProps() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
return false;
};
var nextDispatchProps = computeDispatchProps(this.store, props);
if (_utilsShallowEqual2['default'](nextDispatchProps, this.dispatchProps)) {
return false;
}
function Connect(props, context) {
_classCallCheck(this, Connect);
this.dispatchProps = nextDispatchProps;
return true;
};
_Component.call(this, props, context);
this.version = version;
this.store = props.store || context.store;
Connect.prototype.updateState = function updateState() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
_invariant2['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.nextState = this.computeNextState(props);
};
this.stateProps = computeStateProps(this.store, props);
this.dispatchProps = computeDispatchProps(this.store, props);
this.state = { storeState: null };
this.updateState();
}
Connect.prototype.isSubscribed = function isSubscribed() {
return typeof this.unsubscribe === 'function';
};
Connect.prototype.computeNextState = function computeNextState() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
Connect.prototype.trySubscribe = function trySubscribe() {
if (shouldSubscribe && !this.unsubscribe) {
this.unsubscribe = this.store.subscribe(this.handleChange.bind(this));
this.handleChange();
}
};
return _computeNextState(this.stateProps, this.dispatchProps, props);
};
Connect.prototype.tryUnsubscribe = function tryUnsubscribe() {
if (this.unsubscribe) {
this.unsubscribe();
this.unsubscribe = null;
}
};
Connect.prototype.updateStateProps = function updateStateProps() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
Connect.prototype.componentDidMount = function componentDidMount() {
this.trySubscribe();
};
var nextStateProps = computeStateProps(this.store, props);
if (_utilsShallowEqual2['default'](nextStateProps, this.stateProps)) {
return false;
}
Connect.prototype.componentWillUnmount = function componentWillUnmount() {
this.tryUnsubscribe();
};
this.stateProps = nextStateProps;
return true;
};
Connect.prototype.handleChange = function handleChange() {
if (!this.unsubscribe) {
return;
}
Connect.prototype.updateDispatchProps = function updateDispatchProps() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
this.setState({
storeState: this.store.getState()
});
};
var nextDispatchProps = computeDispatchProps(this.store, props);
if (_utilsShallowEqual2['default'](nextDispatchProps, this.dispatchProps)) {
return false;
}
Connect.prototype.getWrappedInstance = function getWrappedInstance() {
return this.refs.wrappedInstance;
};
this.dispatchProps = nextDispatchProps;
return true;
};
Connect.prototype.render = function render() {
return React.createElement(WrappedComponent, _extends({ ref: 'wrappedInstance'
}, this.nextState));
};
Connect.prototype.updateState = function updateState() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
return Connect;
})(Component);
this.nextState = this.computeNextState(props);
};
Connect.displayName = 'Connect(' + getDisplayName(WrappedComponent) + ')';
Connect.WrappedComponent = WrappedComponent;
Connect.contextTypes = {
store: storeShape
Connect.prototype.isSubscribed = function isSubscribed() {
return typeof this.unsubscribe === 'function';
};
Connect.propTypes = {
store: storeShape
Connect.prototype.trySubscribe = function trySubscribe() {
if (shouldSubscribe && !this.unsubscribe) {
this.unsubscribe = this.store.subscribe(this.handleChange.bind(this));
this.handleChange();
}
};
if (true) {
Connect.prototype.componentWillUpdate = function componentWillUpdate() {
if (this.version === version) {
return;
}
Connect.prototype.tryUnsubscribe = function tryUnsubscribe() {
if (this.unsubscribe) {
this.unsubscribe();
this.unsubscribe = null;
}
};
// We are hot reloading!
this.version = version;
Connect.prototype.componentDidMount = function componentDidMount() {
this.trySubscribe();
};
// Update the state and bindings.
this.trySubscribe();
this.updateStateProps();
this.updateDispatchProps();
this.updateState();
};
}
Connect.prototype.componentWillUnmount = function componentWillUnmount() {
this.tryUnsubscribe();
};
return _hoistNonReactStatics2['default'](Connect, WrappedComponent);
};
};
}
Connect.prototype.handleChange = function handleChange() {
if (!this.unsubscribe) {
return;
}
module.exports = exports['default'];
this.setState({
storeState: this.store.getState()
});
};
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
Connect.prototype.getWrappedInstance = function getWrappedInstance() {
_invariant2['default'](withRef, 'To access the wrapped instance, you need to specify ' + '{ withRef: true } as the fourth argument of the connect() call.');
'use strict';
return this.refs.wrappedInstance;
};
exports.__esModule = true;
exports['default'] = createProvider;
Connect.prototype.render = function render() {
var ref = withRef ? 'wrappedInstance' : null;
return _react2['default'].createElement(WrappedComponent, _extends({}, this.nextState, { ref: ref }));
};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
return Connect;
})(_react.Component);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _utilsCreateStoreShape = __webpack_require__(1);
var _utilsCreateStoreShape2 = _interopRequireDefault(_utilsCreateStoreShape);
function isUsingOwnerContext(React) {
var version = React.version;
if (typeof version !== 'string') {
return true;
}
var sections = version.split('.');
var major = parseInt(sections[0], 10);
var minor = parseInt(sections[1], 10);
return major === 0 && minor === 13;
}
function createProvider(React) {
var Component = React.Component;
var PropTypes = React.PropTypes;
var Children = React.Children;
var storeShape = _utilsCreateStoreShape2['default'](PropTypes);
var requireFunctionChild = isUsingOwnerContext(React);
var didWarnAboutChild = false;
function warnAboutFunctionChild() {
if (didWarnAboutChild || requireFunctionChild) {
return;
}
didWarnAboutChild = true;
console.error( // eslint-disable-line no-console
'With React 0.14 and later versions, you no longer need to ' + 'wrap <Provider> child into a function.');
}
function warnAboutElementChild() {
if (didWarnAboutChild || !requireFunctionChild) {
return;
}
didWarnAboutChild = true;
console.error( // eslint-disable-line no-console
'With React 0.13, you need to ' + 'wrap <Provider> child into a function. ' + 'This restriction will be removed with React 0.14.');
}
var didWarnAboutReceivingStore = false;
function warnAboutReceivingStore() {
if (didWarnAboutReceivingStore) {
return;
}
didWarnAboutReceivingStore = true;
console.error( // eslint-disable-line no-console
'<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 Provider = (function (_Component) {
_inherits(Provider, _Component);
Provider.prototype.getChildContext = function getChildContext() {
return { store: this.store };
Connect.displayName = 'Connect(' + getDisplayName(WrappedComponent) + ')';
Connect.WrappedComponent = WrappedComponent;
Connect.contextTypes = {
store: _utilsStoreShape2['default']
};
function Provider(props, context) {
_classCallCheck(this, Provider);
_Component.call(this, props, context);
this.store = props.store;
}
Provider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var store = this.store;
var nextStore = nextProps.store;
if (store !== nextStore) {
warnAboutReceivingStore();
}
Connect.propTypes = {
store: _utilsStoreShape2['default']
};
Provider.prototype.render = function render() {
var children = this.props.children;
if (true) {
Connect.prototype.componentWillUpdate = function componentWillUpdate() {
if (this.version === version) {
return;
}
if (typeof children === 'function') {
warnAboutFunctionChild();
children = children();
} else {
warnAboutElementChild();
}
// We are hot reloading!
this.version = version;
return Children.only(children);
};
// Update the state and bindings.
this.trySubscribe();
this.updateStateProps();
this.updateDispatchProps();
this.updateState();
};
}
return Provider;
})(Component);
Provider.childContextTypes = {
store: storeShape.isRequired
return _hoistNonReactStatics2['default'](Connect, WrappedComponent);
};
Provider.propTypes = {
store: storeShape.isRequired,
children: (requireFunctionChild ? PropTypes.func : PropTypes.element).isRequired
};
return Provider;
}

@@ -603,3 +523,3 @@

var _redux = __webpack_require__(11);
var _redux = __webpack_require__(10);

@@ -721,8 +641,2 @@ function wrapActionCreators(actionCreators) {

/***/ },
/* 11 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
/***/ }

@@ -729,0 +643,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(10),s=n(o),u=r(2),i=n(u),a=i.default(s.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=u.default(t),r=a.default(t);return{Provider:e,connect:r}}e.__esModule=!0,e.default=o;var s=r(4),u=n(s),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 s(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 u(t){return t.displayName||t.name||"Component"}function i(t){var e=t.Component,r=t.PropTypes,n=p.default(r);return function(r,i,c){function p(t,e){var r=t.getState(),n=R?g(r,e):g(r);return x.default(h.default(n),"`mapStateToProps` must return an object. Instead received %s.",n),n}function f(t,e){var r=t.dispatch,n=C?O(r,e):O(r);return x.default(h.default(n),"`mapDispatchToProps` must return an object. Instead received %s.",n),n}function d(t,e,r){var n=j(t,e,r);return x.default(h.default(n),"`mergeProps` must return an object. Instead received %s.",n),n}var y=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],m=Boolean(r),g=r||P,O=h.default(i)?v.default(i):i||_,j=c||S,R=g.length>1,C=O.length>1,T=y.pure,M=void 0===T?!0:T,q=w++;return function(r){var i=function(e){function n(t,r){o(this,n),e.call(this,t,r),this.version=q,this.store=t.store||r.store,x.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=p(this.store,t),this.dispatchProps=f(this.store,t),this.state={storeState:null},this.updateState()}return s(n,e),n.prototype.shouldComponentUpdate=function(t,e){if(!M)return this.updateStateProps(t),this.updateDispatchProps(t),this.updateState(t),!0;var r=e.storeState!==this.state.storeState,n=!l.default(t,this.props),o=!1,s=!1;return(r||n&&R)&&(o=this.updateStateProps(t)),n&&C&&(s=this.updateDispatchProps(t)),n||o||s?(this.updateState(t),!0):!1},n.prototype.computeNextState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];return d(this.stateProps,this.dispatchProps,t)},n.prototype.updateStateProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=p(this.store,t);return l.default(e,this.stateProps)?!1:(this.stateProps=e,!0)},n.prototype.updateDispatchProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=f(this.store,t);return l.default(e,this.dispatchProps)?!1:(this.dispatchProps=e,!0)},n.prototype.updateState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];this.nextState=this.computeNextState(t)},n.prototype.isSubscribed=function(){return"function"==typeof this.unsubscribe},n.prototype.trySubscribe=function(){m&&!this.unsubscribe&&(this.unsubscribe=this.store.subscribe(this.handleChange.bind(this)),this.handleChange())},n.prototype.tryUnsubscribe=function(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)},n.prototype.componentDidMount=function(){this.trySubscribe()},n.prototype.componentWillUnmount=function(){this.tryUnsubscribe()},n.prototype.handleChange=function(){this.unsubscribe&&this.setState({storeState:this.store.getState()})},n.prototype.getWrappedInstance=function(){return this.refs.wrappedInstance},n.prototype.render=function(){return t.createElement(r,a({ref:"wrappedInstance"},this.nextState))},n}(e);return i.displayName="Connect("+u(r)+")",i.WrappedComponent=r,i.contextTypes={store:n},i.propTypes={store:n},b.default(i,r)}}}e.__esModule=!0;var a=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 c=r(1),p=n(c),f=r(6),l=n(f),d=r(5),h=n(d),y=r(7),v=n(y),m=r(8),b=n(m),g=r(9),x=n(g),P=function(){return{}},_=function(t){return{dispatch:t}},S=function(t,e,r){return a({},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 s(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 u(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(){d||l||(d=!0,console.error("With React 0.14 and later versions, you no longer need to wrap <Provider> child into a function."))}function r(){!d&&l&&(d=!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(){h||(h=!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,a=t.PropTypes,p=t.Children,f=c.default(a),l=u(t),d=!1,h=!1,y=function(t){function u(e,r){o(this,u),t.call(this,e,r),this.store=e.store}return s(u,t),u.prototype.getChildContext=function(){return{store:this.store}},u.prototype.componentWillReceiveProps=function(t){var e=this.store,r=t.store;e!==r&&n()},u.prototype.render=function(){var t=this.props.children;return"function"==typeof t?(e(),t=t()):r(),p.only(t)},u}(i);return y.childContextTypes={store:f.isRequired},y.propTypes={store:f.isRequired,children:(l?a.func:a.element).isRequired},y}e.__esModule=!0,e.default=i;var a=r(1),c=n(a);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,s=0;s<r.length;s++)if(!o.call(e,r[s])||t[r[s]]!==e[r[s]])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(11);t.exports=e.default},function(t,e){"use strict";var r={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},n={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0};t.exports=function(t,e){for(var o=Object.getOwnPropertyNames(e),s=0;s<o.length;++s)r[o[s]]||n[o[s]]||(t[o[s]]=e[o[s]]);return t}},function(t,e,r){"use strict";var n=function(t,e,r,n,o,s,u,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,s,u,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}])});
!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(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return t[o].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t.default:t}e.__esModule=!0;var n=r(3);e.Provider=o(n);var s=r(4);e.connect=o(s)},function(e,r){e.exports=t},function(t,e,r){"use strict";e.__esModule=!0;var o=r(1);e.default=o.PropTypes.shape({subscribe:o.PropTypes.func.isRequired,dispatch:o.PropTypes.func.isRequired,getState:o.PropTypes.func.isRequired}),t.exports=e.default},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(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 u(){c||(c=!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."))}e.__esModule=!0;var i=r(1),a=r(2),p=o(a),c=!1,f=function(t){function e(r,o){n(this,e),t.call(this,r,o),this.store=r.store}return s(e,t),e.prototype.getChildContext=function(){return{store:this.store}},e.prototype.componentWillReceiveProps=function(t){var e=this.store,r=t.store;e!==r&&u()},e.prototype.render=function(){var t=this.props.children;return i.Children.only(t)},e}(i.Component);e.default=f,f.propTypes={store:p.default.isRequired,children:i.PropTypes.element.isRequired},f.childContextTypes={store:p.default.isRequired},t.exports=e.default},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(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 u(t){return t.displayName||t.name||"Component"}function i(t,e,r){function o(t,e){var r=t.getState(),o=T?b(r,e):b(r);return _.default(m.default(o),"`mapStateToProps` must return an object. Instead received %s.",o),o}function i(t,e){var r=t.dispatch,o=C?v(r,e):v(r);return _.default(m.default(o),"`mapDispatchToProps` must return an object. Instead received %s.",o),o}function f(t,e,r){var o=P(t,e,r);return _.default(m.default(o),"`mergeProps` must return an object. Instead received %s.",o),o}var d=arguments.length<=3||void 0===arguments[3]?{}:arguments[3],y=Boolean(t),b=t||S,v=m.default(e)?g.default(e):e||w,P=r||O,T=b.length>1,C=v.length>1,R=d.pure,M=void 0===R?!0:R,q=d.withRef,E=void 0===q?!1:q,I=j++;return function(t){var e=function(e){function r(t,s){n(this,r),e.call(this,t,s),this.version=I,this.store=t.store||s.store,_.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=o(this.store,t),this.dispatchProps=i(this.store,t),this.state={storeState:null},this.updateState()}return s(r,e),r.prototype.shouldComponentUpdate=function(t,e){if(!M)return this.updateStateProps(t),this.updateDispatchProps(t),this.updateState(t),!0;var r=e.storeState!==this.state.storeState,o=!h.default(t,this.props),n=!1,s=!1;return(r||o&&T)&&(n=this.updateStateProps(t)),o&&C&&(s=this.updateDispatchProps(t)),o||n||s?(this.updateState(t),!0):!1},r.prototype.computeNextState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];return f(this.stateProps,this.dispatchProps,t)},r.prototype.updateStateProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=o(this.store,t);return h.default(e,this.stateProps)?!1:(this.stateProps=e,!0)},r.prototype.updateDispatchProps=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0],e=i(this.store,t);return h.default(e,this.dispatchProps)?!1:(this.dispatchProps=e,!0)},r.prototype.updateState=function(){var t=arguments.length<=0||void 0===arguments[0]?this.props:arguments[0];this.nextState=this.computeNextState(t)},r.prototype.isSubscribed=function(){return"function"==typeof this.unsubscribe},r.prototype.trySubscribe=function(){y&&!this.unsubscribe&&(this.unsubscribe=this.store.subscribe(this.handleChange.bind(this)),this.handleChange())},r.prototype.tryUnsubscribe=function(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)},r.prototype.componentDidMount=function(){this.trySubscribe()},r.prototype.componentWillUnmount=function(){this.tryUnsubscribe()},r.prototype.handleChange=function(){this.unsubscribe&&this.setState({storeState:this.store.getState()})},r.prototype.getWrappedInstance=function(){return _.default(E,"To access the wrapped instance, you need to specify { withRef: true } as the fourth argument of the connect() call."),this.refs.wrappedInstance},r.prototype.render=function(){var e=E?"wrappedInstance":null;return c.default.createElement(t,a({},this.nextState,{ref:e}))},r}(p.Component);return e.displayName="Connect("+u(t)+")",e.WrappedComponent=t,e.contextTypes={store:l.default},e.propTypes={store:l.default},x.default(e,t)}}e.__esModule=!0;var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t};e.default=i;var p=r(1),c=o(p),f=r(2),l=o(f),d=r(6),h=o(d),y=r(5),m=o(y),b=r(7),g=o(b),v=r(8),x=o(v),P=r(9),_=o(P),S=function(){return{}},w=function(t){return{dispatch:t}},O=function(t,e,r){return a({},r,t,e)},j=0;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&&o(r)===o(Object)}e.__esModule=!0,e.default=r;var o=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),o=Object.keys(e);if(r.length!==o.length)return!1;for(var n=Object.prototype.hasOwnProperty,s=0;s<r.length;s++)if(!n.call(e,r[s])||t[r[s]]!==e[r[s]])return!1;return!0}e.__esModule=!0,e.default=r,t.exports=e.default},function(t,e,r){"use strict";function o(t){return function(e){return n.bindActionCreators(t,e)}}e.__esModule=!0,e.default=o;var n=r(10);t.exports=e.default},function(t,e){"use strict";var r={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0};t.exports=function(t,e){for(var n=Object.getOwnPropertyNames(e),s=0;s<n.length;++s)r[n[s]]||o[n[s]]||(t[n[s]]=e[n[s]]);return t}},function(t,e,r){"use strict";var o=function(t,e,r,o,n,s,u,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 p=[r,o,n,s,u,i],c=0;a=new Error("Invariant Violation: "+e.replace(/%s/g,function(){return p[c++]}))}throw a.framesToPop=1,a}};t.exports=o},function(t,r){t.exports=e}])});

44

docs/api.md

@@ -5,8 +5,10 @@ ## API

Makes the Redux store available to the `connect()` calls in the component hierarchy below. Normally, you can’t use `connect()` without wrapping the root component in `<Provider>`. (If you *really* need to, you can manually pass `store` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `store` in unit tests, or in non-fully-React codebases. Normally, you should just use `<Provider>`.)
Makes the Redux store available to the `connect()` calls in the component hierarchy below. Normally, you can’t use `connect()` without wrapping the root component in `<Provider>`.
If you *really* need to, you can manually pass `store` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `store` in unit tests, or in non-fully-React codebases. Normally, you should just use `<Provider>`.
#### Props
* `store`: (*[Redux Store](http://gaearon.github.io/redux/docs/api/Store.html)*): The single Redux store in your application.
* `children`: (*Function*): Unlike most React components, `<Provider>` accepts a [function as a child](#child-must-be-a-function) with your root component. This is a temporary workaround for a React 0.13 context issue, which will be fixed when React 0.14 comes out.
* `store` (*[Redux Store](http://rackt.github.io/redux/docs/api/Store.html)*): The single Redux store in your application.
* `children` (*ReactElement*) The root of your component hierarchy.

@@ -18,5 +20,5 @@ #### Example

```js
React.render(
ReactDOM.render(
<Provider store={store}>
{() => <MyRootComponent />}
<MyRootComponent />
</Provider>,

@@ -31,5 +33,6 @@ rootEl

Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
React.render(
ReactDOM.render(
<Provider store={store}>
{() => <Handler routerState={routerState} />} // note "routerState" here: important to pass it down
{/* note "routerState" here: important to pass it down */}
<Handler routerState={routerState} />
</Provider>,

@@ -44,5 +47,5 @@ document.getElementById('root')

```js
React.render(
ReactDOM.render(
<Provider store={store}>
{() => <Router history={history}>...</Router>}
<Router history={history}>...</Router>
</Provider>,

@@ -64,3 +67,3 @@ targetEl

* [`mapDispatchToProps(dispatch, [ownProps]): dispatchProps`] \(*Object* or *Function*): If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged into the component’s props. If a function is passed, it will be given `dispatch`. It’s up to you to return an object that somehow uses `dispatch` to bind action creators in your own way. (Tip: you may use the [`bindActionCreators()`](http://gaearon.github.io/redux/docs/api/bindActionCreators.html) helper from Redux.) If you omit it, the default implementation just injects `dispatch` into your component’s props. If `ownProps` is specified as a second argument, its value will be the properties passed to your component, and `mapStateToProps` will be re-invoked whenever the component receives new props.
* [`mapDispatchToProps(dispatch, [ownProps]): dispatchProps`] \(*Object* or *Function*): If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged into the component’s props. If a function is passed, it will be given `dispatch`. It’s up to you to return an object that somehow uses `dispatch` to bind action creators in your own way. (Tip: you may use the [`bindActionCreators()`](http://rackt.github.io/redux/docs/api/bindActionCreators.html) helper from Redux.) If you omit it, the default implementation just injects `dispatch` into your component’s props. If `ownProps` is specified as a second argument, its value will be the properties passed to your component, and `mapDispatchToProps` will be re-invoked whenever the component receives new props.

@@ -70,3 +73,4 @@ * [`mergeProps(stateProps, dispatchProps, ownProps): props`] \(*Function*): If specified, it is passed the result of `mapStateToProps()`, `mapDispatchToProps()`, and the parent `props`. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, `Object.assign({}, ownProps, stateProps, dispatchProps)` is used by default.

* [`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`.*
* [`pure = true`] *(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`.*
* [`withRef = false`] *(Boolean)*: If true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. *Defaults to `false`.*

@@ -77,2 +81,16 @@ #### Returns

##### Static Properties
* `WrappedComponent` *(Component)*: The original component class passed to `connect()`.
##### Static Methods
All the original static methods of the component are hoisted.
##### Instance Methods
###### `getWrappedInstance(): ReactComponent`
Returns the wrapped component instance. Only available if you pass `{ withRef: true }` as part of the `connect()`’s fourth `options` argument.
#### Remarks

@@ -84,6 +102,4 @@

* 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).
* 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/rackt/reselect) to efficiently compose selectors and [compute derived data](http://rackt.github.io/redux/docs/recipes/ComputingDerivedData.html).
* **To use `connect()`, the root component of your app must be wrapped into `<Provider>{() => ... }</Provider>` before being rendered.** You may also pass `store` as a prop to the `connect()`ed component, but it's not recommended, because it's just too much trouble. Only do this for non-fully-React codebases or to stub the store in a unit test.
#### Examples

@@ -90,0 +106,0 @@

12

docs/quick-start.md

@@ -129,5 +129,6 @@ ## Quick Start

The trick is to wrap the whole view hierarchy into a `<Provider>{() => ... }</Provider>` where `Provider` is imported from `react-redux`. One gotcha is that **the child of `Provider` must be a function**. This is to work around an issue about how context (undocumented feature we have to rely on to pass Redux data to components below) works in React 0.13. In React 0.14, you will be able to put your view hierarchy in `<Provider>` without wrapping it into a function.
The trick is to wrap the whole view hierarchy into a `<Provider>` from React Redux.
```js
import ReactDOM from 'react-dom';
import { Component } from 'react';

@@ -144,7 +145,8 @@ import { Provider } from 'react-redux';

React.render((
ReactDOM.render(
<Provider store={store}>
{() => <App />}
</Provider>
), targetEl);
<App />
</Provider>,
targetEl
);
```

13

docs/troubleshooting.md

@@ -21,5 +21,6 @@ ## Troubleshooting

Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
React.render(
ReactDOM.render(
<Provider store={store}>
{() => <Handler routerState={routerState} />} // note "routerState" here
{/* note "routerState" here */}
<Handler routerState={routerState} />
</Provider>,

@@ -45,3 +46,3 @@ document.getElementById('root')

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.
If your views depend on global state or [React “context”](http://facebook.github.io/react/docs/context.html), you might find that views decorated with `connect()` will fail to update.

@@ -52,3 +53,3 @@ >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).

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()`:
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()`:

@@ -73,3 +74,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>{() => 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.
3. Make sure you’re running the latest versions of React and React Redux.

@@ -79,3 +80,1 @@ ### 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

If you’re using React for web, this usually means you have a [duplicate React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375). Follow the linked instructions to fix this.
If you’re using React Native, make sure you’re importing `react-redux/native` both for `<Provider>` and any `connect()` call. Importing from `react-redux` will not work on React Native.

17

lib/index.js

@@ -5,17 +5,10 @@ 'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _interopRequire(obj) { return obj && obj.__esModule ? obj['default'] : obj; }
var _react = require('react');
var _componentsProvider = require('./components/Provider');
var _react2 = _interopRequireDefault(_react);
exports.Provider = _interopRequire(_componentsProvider);
var _componentsCreateAll = require('./components/createAll');
var _componentsConnect = require('./components/connect');
var _componentsCreateAll2 = _interopRequireDefault(_componentsCreateAll);
var _createAll = _componentsCreateAll2['default'](_react2['default']);
var Provider = _createAll.Provider;
var connect = _createAll.connect;
exports.Provider = Provider;
exports.connect = connect;
exports.connect = _interopRequire(_componentsConnect);

9

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

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

"mocha-jsdom": "~0.4.0",
"react": "^0.14.0-rc1",
"react-addons-test-utils": "^0.14.0-rc1",
"react-dom": "^0.14.0-rc1",
"react": "^0.14.0",
"react-addons-test-utils": "^0.14.0",
"react-dom": "^0.14.0",
"redux": "^3.0.0",

@@ -66,4 +66,5 @@ "rimraf": "^2.3.4",

"peerDependencies": {
"react": "^0.14.0",
"redux": "^2.0.0 || ^3.0.0"
}
}

5

README.md

@@ -18,8 +18,7 @@ React Redux

React Redux requires **React 0.13 or later.**
React Redux requires **React 0.14 or later.**
## React Native
What you get from `react-redux` is for React.
For React Native, import from `react-redux/native` instead.
Until [React Native is compatible with React 0.14](https://github.com/facebook/react-native/issues/2985), you’ll need to keep using [React Redux 3.x branch and documentation](https://github.com/rackt/react-redux/tree/v3.1.0).

@@ -26,0 +25,0 @@ ## Documentation

58

test/components/connect.spec.js

@@ -88,3 +88,3 @@ import expect from 'expect';

it('should subscribe to the store changes', () => {
it('should subscribe class components to the store changes', () => {
const store = createStore(stringBuilder);

@@ -113,2 +113,28 @@

it('should subscribe pure function components to the store changes', () => {
const store = createStore(stringBuilder);
let Container = connect(
state => ({ string: state })
)(function Container(props) {
return <Passthrough {...props}/>;
});
const spy = expect.spyOn(console, 'error');
const tree = TestUtils.renderIntoDocument(
<ProviderMock store={store}>
<Container />
</ProviderMock>
);
spy.destroy();
expect(spy.calls.length).toBe(0);
const stub = TestUtils.findRenderedComponentWithType(tree, Passthrough);
expect(stub.props.string).toBe('');
store.dispatch({ type: 'APPEND', body: 'a'});
expect(stub.props.string).toBe('a');
store.dispatch({ type: 'APPEND', body: 'b'});
expect(stub.props.string).toBe('ab');
});
it('should handle dispatches before componentDidMount', () => {

@@ -1089,2 +1115,26 @@ const store = createStore(stringBuilder);

it('should throw when trying to access the wrapped instance if withRef is not specified', () => {
const store = createStore(() => ({}));
class Container extends Component {
render() {
return <Passthrough />;
}
}
const decorator = connect(state => state);
const Decorated = decorator(Container);
const tree = TestUtils.renderIntoDocument(
<ProviderMock store={store}>
<Decorated />
</ProviderMock>
);
const decorated = TestUtils.findRenderedComponentWithType(tree, Decorated);
expect(() => decorated.getWrappedInstance()).toThrow(
/To access the wrapped instance, you need to specify \{ withRef: true \} as the fourth argument of the connect\(\) call\./
);
});
it('should return the instance of the wrapped component for use in calling child methods', () => {

@@ -1107,3 +1157,3 @@ const store = createStore(() => ({}));

const decorator = connect(state => state);
const decorator = connect(state => state, null, null, { withRef: true });
const Decorated = decorator(Container);

@@ -1238,3 +1288,3 @@

@connect(state => ({ state }))
@connect(state => ({ state }), null, null, { withRef: true })
class Container extends Component {

@@ -1284,3 +1334,3 @@

const container = TestUtils.findRenderedComponentWithType(tree, Container);
const node = React.findDOMNode(container.getWrappedInstance().refs.button);
const node = container.getWrappedInstance().refs.button;
TestUtils.Simulate.click(node);

@@ -1287,0 +1337,0 @@ expect(childMapStateInvokes).toBe(4);

150

test/components/Provider.spec.js

@@ -7,3 +7,2 @@ import expect from 'expect';

import { Provider } from '../../src/index';
import createProvider from '../../src/components/createProvider';

@@ -24,119 +23,30 @@ describe('React', () => {

it('should not warn when using child-as-a-function before React 0.14', () => {
const store = createStore(() => ({}));
['0.13.0-beta', '0.13.0', '0.13.3'].forEach(version => {
const LocalProvider = createProvider({ ...React, version });
let spy = expect.spyOn(console, 'error');
const tree = TestUtils.renderIntoDocument(
<LocalProvider store={store}>
{() => <Child />}
</LocalProvider>
);
spy.destroy();
expect(spy.calls.length).toBe(0);
spy = expect.spyOn(console, 'error');
tree.forceUpdate();
spy.destroy();
expect(spy.calls.length).toBe(0);
});
});
it('should warn once when using a single element before React 0.14', () => {
const store = createStore(() => ({}));
['0.13.0-beta', '0.13.0', '0.13.3', undefined].forEach(version => {
const LocalProvider = createProvider({ ...React, version });
// Trick React into checking propTypes every time:
LocalProvider.displayName = Math.random().toString();
let spy = expect.spyOn(console, 'error');
const tree = TestUtils.renderIntoDocument(
<LocalProvider store={store}>
<Child />
</LocalProvider>
);
spy.destroy();
expect(spy.calls.length).toBe(2);
expect(spy.calls[0].arguments[0]).toMatch(
/Invalid prop `children` of type `object` supplied to .*, expected `function`./
);
expect(spy.calls[1].arguments[0]).toMatch(
/With React 0.13, you need to wrap <Provider> child into a function. This restriction will be removed with React 0.14./
);
spy = expect.spyOn(console, 'error');
tree.forceUpdate();
spy.destroy();
expect(spy.calls.length).toBe(0);
});
});
it('should warn once when using child-as-a-function after React 0.14', () => {
const store = createStore(() => ({}));
['0.14.0-beta3', '0.14.0', '0.14.2', '0.15.0-beta', '1.0.0-beta', '1.0.0'].forEach(version => {
const LocalProvider = createProvider({ ...React, version });
// Trick React into checking propTypes every time:
LocalProvider.displayName = Math.random().toString();
let spy = expect.spyOn(console, 'error');
const tree = TestUtils.renderIntoDocument(
<LocalProvider store={store}>
{() => <Child />}
</LocalProvider>
);
spy.destroy();
expect(spy.calls.length).toBe(2);
expect(spy.calls[0].arguments[0]).toMatch(
/Invalid prop `children` supplied to .*, expected a single ReactElement./
);
expect(spy.calls[1].arguments[0]).toMatch(
/With React 0.14 and later versions, you no longer need to wrap <Provider> child into a function./
);
spy = expect.spyOn(console, 'error');
tree.forceUpdate();
spy.destroy();
expect(spy.calls.length).toBe(0);
});
});
it('should enforce a single child', () => {
const store = createStore(() => ({}));
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
<div />
</Provider>
)).toNotThrow();
// Ignore propTypes warnings
const propTypes = Provider.propTypes;
Provider.propTypes = {};
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
</Provider>
)).toThrow(/exactly one child/);
try {
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
<div />
</Provider>
)).toNotThrow();
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
<div />
<div />
</Provider>
)).toThrow(/exactly one child/);
});
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
</Provider>
)).toThrow(/exactly one child/);
it('should enforce a single child when using function-as-a-child', () => {
const store = createStore(() => ({}));
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
{() => <div />}
</Provider>
)).toNotThrow();
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
{() => {}}
</Provider>
)).toThrow(/exactly one child/);
expect(() => TestUtils.renderIntoDocument(
<Provider store={store}>
<div />
<div />
</Provider>
)).toThrow(/exactly one child/);
} finally {
Provider.propTypes = propTypes;
}
});

@@ -160,18 +70,2 @@

it('should add the store to the child context with function-as-a-child', () => {
const store = createStore(() => ({}));
const spy = expect.spyOn(console, 'error');
const tree = TestUtils.renderIntoDocument(
<Provider store={store}>
{() => <Child />}
</Provider>
);
spy.destroy();
expect(spy.calls.length).toBe(0);
const child = TestUtils.findRenderedComponentWithType(tree, Child);
expect(child.context.store).toBe(store);
});
it('should warn once when receiving a new store in props', () => {

@@ -178,0 +72,0 @@ const store1 = createStore((state = 10) => state + 1);

1

webpack.config.base.js

@@ -22,3 +22,2 @@ 'use strict';

'react': reactExternal,
'react-native': reactExternal,
'redux': reduxExternal

@@ -25,0 +24,0 @@ },

lib/components/createAll.js
lib/components/createConnect.js
lib/components/createProvider.js
lib/native.js
lib/utils/createStoreShape.js
native.js
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc