react-connect - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

package.json

 {
   "name": "react-connect",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "State management agnostic decorator for loosely coupled React containers",
@@ -8,2 +8,6 @@ "main": "index.js",
   "author": "Mateusz Podlasin <[e-mail]>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mpodlasin/react-connect.git"
+  },
   "keywords": [
@@ -33,3 +37,2 @@ "React",
     "react-dom": "^15.6.1",
-    "react-redux": "^5.0.5",
     "react-test-renderer": "^15.5.4",
@@ -53,4 +56,5 @@ "redux": "^3.6.0",
   "dependencies": {
-    "invariant": "^2.2.2"
+    "invariant": "^2.2.2",
+    "react-redux": "^5.0.5"
   }
 }

README.md

@@ -1,4 +0,180 @@
-# React Link
+# React Connect
 
 ## State management agnostic decorator for loosely coupled React containers
 
+or
+
+## Better way to connect React component to an arbitrary store
+
+or
+
+## Alternative to `react-redux`, `mobx-react` and similar packages
+
+### Motivation
+
+#### Let's start with `redux` containers
+
+A typical `redux` container looks something like this:
+
+```jsx harmony
+const Container = connect(
+    state => ({
+        someProps: state.someState
+    }),
+    dispatch => ({
+        onClick() {
+            dispatch({type: 'SOME_ACTION'});
+        }
+    })
+)(props => (
+    <div onClick={props.onClick}>{props.someProps}</div>
+));
+```
+
+Note that you tightly coupled your component with a `redux` store. Even if you used selectors which hide store internals, these selectors expect that state object of certain shape will always be provided. If some day you decide to switch to `mobx`, or you'll just want to use the same container in different `redux` app, you might have a problem.
+
+Not a problem! - you say, since you still can export raw, stateless component itself, or even get access to it via `Container.WrappedComponent`, where it is always exposed.
+
+That is true, but in complex applications, especially those trying to improve their rendering performance, you will often find yourself making large number of small containers, which themselves will be rendered inside other containers. In fact, to efficiently render list of elements in `redux`, the best way is to make each element of a list container itself:
+
+```jsx harmony
+export const List = ({list}) => (
+    <ol>
+    {list.map(elementId => {
+        // Element is a redux container!
+        return (<Element id={elementId} key={elementId} />);
+    })}
+    </ol>
+);
+```
+
+Note that even though `List` is exported as a pure component, at this point it is impossible to render it without providing `redux` store in context. As was mentioned before, this component is not even tied to `redux` library in general, but to a state object of very specific shape.
+
+Generally speaking, from now on `List` component will not be usable in any other application, even `redux` one.
+
+This is very bad place to be. React promises deep componentization - if I created `List` of `Element` components once, I should not have to write it again ever. I should be able to just take it and render it in any other application, whether it's using `redux`, `mobx` or any other state management solution (even totally custom one). I should be able to create small, deeply nested containers to not take performance and readability penalty of having just one, big container at the root of the app, while still having my containers not tied to any specific data structure or library and being able to share them between projects without any additional work (this is what we mean, when we say "components" after all).
+ 
+`react-connect` allows to do just that. It preserves the notion of container, but with a twist. Here is `redux` container from first snippet, rewritten to `react-connect`:
+
+```jsx harmony
+import { container } from 'react-connect';
+
+const Container = container('Container', props => (
+    <div onClick={props.onClick}>{props.someProps}</div>
+));
+```
+
+It actually looks very much like regular component. So how you feed it data? Where did these `redux` mappers go?
+
+Let's say I want to connect this container to `redux` store. What I need is a `link` between store and my container:
+
+```jsx harmony
+import { reduxLink } from 'react-connect';
+
+const containerLink = reduxLink({
+    mapStateToProps: (state) => ({
+        someProps: state.someState
+    }),
+    mapDispatchToProps: (dispatch) => ({
+        onClick() {
+            dispatch({type: 'SOME_ACTION'});
+        }
+    })
+});
+```
+
+Nothing new here. Just our `redux` mappers, which we wrapped in `reduxLink` function. This function returns what we call a link. Note that this link might land in the same file as our container, but it is probably good idea to keep it somewhere else (say in `links` folder, where each link will be in a file matching name of container that it provides data for).
+
+This way even though we defined how to connect container to store, container is still free of any dependencies to this store or even `redux` in general. We can write multiple links to the very same container and choose relevant one when we render our app.
+
+Let's do just that:
+
+```jsx harmony
+import { Links, Provider } from 'react-connect';
+
+const store = createStore(someReducer); // Just regular redux store here.
+const links = new Links();
+
+links.addLink(Container, containerLink);
+
+render(
+    <Provider links={links} context={{store}} >
+        <Container />
+    </Provider>
+)
+```
+
+This again looks similar to how you would render redux app. Novelty is `Links` object via which you specify which container will be fed data with which links. You then use `Provider`, where you put defined links and - in case of `redux` app - you provide store in context. 
+
+Bear in mind that `Provider` and `Links` themselves still have no idea that you make redux app. This elements will not change when rendering `mobx` or any other map. Sometimes you will just put something else in context (if it's needed). The real change is writing and applying other links to a component.
+
+#### Feeding container other data
+
+So did we achieve anything? We had to do a little bit of extra work and our app got more complex with yet another concept of links and additional folder with them.
+
+Let's start with the simplest case. Let's just render container with some static data. We might need it for an entry in storybook (just to see how it looks during styling) or for snapshot tests.
+
+As was said earlier our `List` with `Element` components was impossible to render without `redux` store in context. Let's rewrite it to `react-connect` and try render it with some static data:
+
+```jsx harmony
+const Element = container('Element', props => (
+    <li>{props.elementName}</li>
+));
+
+const List = container('List', props => (
+    <ol>
+    {list.map(elementId => <Element id={elementId} key={elementId} />)}
+    </ol>    
+));
+```
+
+Before we used `reduxLink` to connect container with data. But we can simply pass data as an object:
+
+```jsx harmony
+links
+    .addLink(Element, { elementName: 'some name' })
+    .addLink(List, { list: [1, 2, 3, 4] });
+```
+
+Because every container can accept links - just like `Provider` - you can now render `List`:
+
+```jsx harmony
+render(<List links={links} />);
+```
+
+This will result in following markup:
+
+```html
+<ol>
+    <li>some name</li>
+    <li>some name</li>
+    <li>some name</li>
+    <li>some name</li>
+</ol>
+```
+
+Because we passed static props as a link to `Element`, every component has the same content. What if we wanted to render real list?
+
+You can provide function instead of static object. Function will receive own props with which component was rendered. In case of `Element` - `id` prop. We can use this id to access real data from list:
+
+```jsx harmony
+const list = ['first name', 'second name', 'third name'];
+
+links
+    .addLink(List, { list: list.map((_, id) => id) })
+    .addLink(Element, ({id}) => ({ elementName: list[id] }));
+```
+
+`List` component gets a list of element ids, which are then used to retrieve data from the list.
+
+This results in a markup: 
+
+```html
+<ol>
+    <li>first name</li>
+    <li>second name</li>
+    <li>third name</li>
+</ol>
+```
+
+So we rendered container without the need for `redux` store, or any kind of high concept state management library for that matter.

src/container.d.ts

 /// <reference types="react" />
 import * as React from 'react';
-export declare function container<P, O>(Component: React.ComponentClass<P & O> | React.StatelessComponent<P & O>): React.ComponentClass<O>;
+import { Links } from './Links';
+export declare function container<P, O>(Component: React.ComponentClass<P & O> | React.StatelessComponent<P & O>): React.ComponentClass<O & {
+    links?: Links;
+}>;
+export declare function container<P, O>(nameIdentifier: string, Component: React.ComponentClass<P & O> | React.StatelessComponent<P & O>): React.ComponentClass<O & {
+    links?: Links;
+}>;

src/container.js

@@ -24,3 +24,16 @@ "use strict";
 var Link_1 = require("./Link");
-function container(Component) {
+function container(ComponentOrName, MaybeComponent) {
+    var name;
+    var Component;
+    if (typeof ComponentOrName === 'string' && typeof MaybeComponent === 'function') {
+        name = ComponentOrName;
+        Component = MaybeComponent;
+    }
+    else {
+        Component = ComponentOrName;
+        name = Component.displayName || Component.name;
+    }
+    if (!name) {
+        throw new Error('Component has no name. Please ensure it is named or pass string identifier as a first argument to "container".');
+    }
     var Connected = (function (_super) {
@@ -30,10 +43,11 @@ __extends(Connected, _super);
             var _this = _super.call(this, props, context) || this;
-            if (!context.reactConnectContext)
+            if (!context.reactConnectContext && !props.links)
                 throw new Error('Did not detect links in context. Did you use Provider?');
-            var link = context.reactConnectContext.links.getLinkFor(Component);
+            _this.reactConnectContext = context.reactConnectContext || { links: props.links };
+            var link = _this.reactConnectContext.links.getLinkFor(name);
             if (!link)
-                throw new Error("Did not find link for " + Component.name);
+                throw new Error("Did not find link for " + name);
             var computedProps;
             if (typeof link === 'function') {
-                var linkInstance_1 = new link(props, context.reactConnectContext);
+                var linkInstance_1 = new link(props, _this.reactConnectContext);
                 if (linkInstance_1 instanceof Link_1.Link) {
@@ -55,9 +69,2 @@ _this.linkInstance = linkInstance_1;
                     ].forEach(function (methodName) { return _this.assignLifeCycleMethod(linkInstance_1, methodName); });
-                    if (linkInstance_1.getChildContext) {
-                        Connected.childContextTypes = Connected.contextTypes;
-                        _this.getChildContext = function () {
-                            var childContext = linkInstance_1.getChildContext();
-                            return { reactConnectContext: __assign({}, context.reactConnectContext, childContext) };
-                        };
-                    }
                     return _this;
@@ -81,2 +88,9 @@ }
         };
+        Connected.prototype.getChildContext = function () {
+            if (this.linkInstance && this.linkInstance.getChildContext) {
+                var childContext = this.linkInstance.getChildContext();
+                return { reactConnectContext: __assign({}, this.reactConnectContext, childContext) };
+            }
+            return { reactConnectContext: this.reactConnectContext };
+        };
         Connected.prototype.componentWillReceiveProps = function (nextProps, nextContext) {
@@ -111,3 +125,7 @@ if (this.link) {
     };
-    Connected.wrappedComponent = Component;
+    Connected.childContextTypes = {
+        reactConnectContext: prop_types_1.any
+    };
+    Connected.WrappedComponent = Component;
+    Connected.wrappedComponentName = name;
     return Connected;
@@ -114,0 +132,0 @@ }

src/Links.d.ts

@@ -12,6 +12,7 @@ /// <reference types="react" />
 }
-export interface LinkConstructor<P, S> {
+export declare type LinkConstructor<P, S> = {
     (ownProps: P): Link<P, S>;
+} | {
     new (ownProps: P): Link<P, S>;
-}
+};
 export declare type LinkLike<P, O> = P | FunctionalLink<P, O> | ObjectLink<P, O> | LinkConstructor<O, P>;
@@ -23,3 +24,3 @@ export declare class Links {
     addLink<P, O, L extends LinkLike<P, O>>(Component: React.ComponentClass<O> | React.StatelessComponent<O>, link: L): Links;
-    getLinkFor<P, O>(Component: React.ComponentClass<P & O> | React.StatelessComponent<P & O>): LinkLike<P, O>;
+    getLinkFor<P, O>(componentName: string): LinkLike<P, O>;
 }

src/Links.js

@@ -14,7 +14,8 @@ "use strict";
     Links.prototype.addLink = function (Component, link) {
-        this.links[Component.wrappedComponent.name] = link;
+        var name = Component.wrappedComponentName;
+        this.links[name] = link;
         return this;
     };
-    Links.prototype.getLinkFor = function (Component) {
-        return this.links[Component.name];
+    Links.prototype.getLinkFor = function (componentName) {
+        return this.links[componentName];
     };
@@ -21,0 +22,0 @@ return Links;

src/MobxLinks.d.ts

@@ -1,11 +0,5 @@
-/// <reference types="react" />
-import { Links } from './Links';
+import { LinkConstructor } from './Links';
 export interface MobxLink<P, O> {
     (stores: any, ownProps: O): P | (P & O);
 }
-export declare class MobxLinks {
-    private stores;
-    private links;
-    constructor(stores: any, links: Links);
-    addLink<P, O>(Component: React.ComponentClass<O> | React.StatelessComponent<O>, link: MobxLink<P, O>): MobxLinks;
-}
+export declare const mobxLink: <P, O>(config: MobxLink<P, O>) => LinkConstructor<O, P>;

src/MobxLinks.js

@@ -15,32 +15,25 @@ "use strict";
 var Link_1 = require("./Link");
-var MobxLinks = (function () {
-    function MobxLinks(stores, links) {
-        this.stores = stores;
-        this.links = links;
-    }
-    MobxLinks.prototype.addLink = function (Component, link) {
-        var that = this;
-        this.links.addLink(Component, (function (_super) {
-            __extends(ComponentLink, _super);
-            function ComponentLink() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.stores = that.stores;
-                return _this;
-            }
-            ComponentLink.prototype.componentWillMount = function () {
-                var _this = this;
-                mobx_1.autorun(function () {
-                    _this.setState(link(_this.stores, _this.props));
-                });
-            };
-            ComponentLink.prototype.componentWillReceiveProps = function (newProps) {
-                this.setState(link(this.stores, newProps));
-            };
-            return ComponentLink;
-        }(Link_1.Link)));
-        return this;
+var prop_types_1 = require("prop-types");
+exports.mobxLink = function (config) {
+    var Connected = (function (_super) {
+        __extends(Connected, _super);
+        function Connected() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Connected.prototype.componentWillMount = function () {
+            var _this = this;
+            mobx_1.autorun(function () {
+                _this.setState(config(_this.context.stores, _this.props));
+            });
+        };
+        Connected.prototype.componentWillReceiveProps = function (newProps) {
+            this.setState(config(this.context.stores, newProps));
+        };
+        return Connected;
+    }(Link_1.Link));
+    Connected.contextTypes = {
+        stores: prop_types_1.any
     };
-    return MobxLinks;
-}());
-exports.MobxLinks = MobxLinks;
+    return Connected;
+};
 //# sourceMappingURL=MobxLinks.js.map

src/reduxLink.d.ts

@@ -1,3 +0,3 @@
-import { Link } from './Link';
 import { Dispatch } from 'redux';
+import { LinkConstructor } from './Links';
 export declare function connectAdvanced(selectorFactory: any, {getDisplayName, methodName, renderCountProp, shouldHandleStateChanges, storeKey, withRef, ...connectOptions}?: any): any;
@@ -9,2 +9,2 @@ export declare const rawReduxLink: any;
 }
-export declare const reduxLink: <SP, DP, O, S>(config: ReduxLinkConfig<SP, DP, O, S>) => Link<O, SP & DP>;
+export declare const reduxLink: <SP, DP, O, S>(config: ReduxLinkConfig<SP, DP, O, S>) => LinkConstructor<O, SP & DP>;

test/container.test.js

@@ -25,2 +25,8 @@ "use strict";
     });
+    it('throws if wrapped component has no name and name was not provided', function () {
+        expect(function () { return container_1.container(function (props) { return React.createElement("div", null); }); }).toThrow();
+    });
+    it('allows passing component with no name if string identifier is specified', function () {
+        expect(function () { return container_1.container('My Container', function (props) { return React.createElement("div", null); }); }).not.toThrow();
+    });
     it('throws if component is rendered without data', function () {
@@ -55,2 +61,9 @@ expect(function () { return enzyme_1.mount(React.createElement(fakes_1.ExampleContainer, null)); }).toThrow();
         });
+        it('displays data from links identified with string identifier', function () {
+            var AnonymousExampleContainer = container_1.container('Something', fakes_1.AnonymousExample);
+            links.addLink(AnonymousExampleContainer, { data: 'some data' });
+            var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+                React.createElement(AnonymousExampleContainer, null)));
+            expect(example.text()).toBe('some data');
+        });
         it('displays data in sub-children from links', function () {
@@ -80,2 +93,14 @@ links
         });
+        it('can render container without a Provider', function () {
+            links.addLink(fakes_1.ExampleContainer, { data: 'some data' });
+            var example = enzyme_1.mount(React.createElement(fakes_1.ExampleContainer, { links: links }));
+            expect(example.text()).toBe('some data');
+        });
+        it('can render nested containers without a Provider', function () {
+            links
+                .addLink(fakes_1.ExampleContainer, { data: 'some data' })
+                .addLink(fakes_1.ExampleWithChildrenContainer, { data: 'some other data' });
+            var example = enzyme_1.mount(React.createElement(fakes_1.ExampleWithChildrenContainer, { links: links }));
+            expect(example.find('span').text()).toBe('some other data');
+        });
     });
@@ -82,0 +107,0 @@ describe('functional link', function () {

test/fakes.d.ts

 /// <reference types="react" />
 import * as React from 'react';
+import { Links } from '../src/Links';
+export declare const AnonymousExample: (props: {
+    data: any;
+}) => JSX.Element;
 export declare class Example extends React.Component<{
@@ -9,3 +13,5 @@ data: any;
 }
-export declare const ExampleContainer: React.ComponentClass<{}>;
+export declare const ExampleContainer: React.ComponentClass<{} & {
+    links?: Links | undefined;
+}>;
 export declare class ExampleWithChildren extends React.Component<{
@@ -16,3 +22,5 @@ data: any;
 }
-export declare const ExampleWithChildrenContainer: React.ComponentClass<{}>;
+export declare const ExampleWithChildrenContainer: React.ComponentClass<{} & {
+    links?: Links | undefined;
+}>;
 export declare let twoPropsExampleRenderedTimes: number;
@@ -29,2 +37,4 @@ export declare class TwoPropsExample extends React.Component<{
     first: any;
+} & {
+    links?: Links | undefined;
 }>;
@@ -47,2 +57,4 @@ export declare let setStatefulTwoPropsExampleState: (state: {
 }
-export declare const WrappedExampleContainer: React.ComponentClass<{}>;
+export declare const WrappedExampleContainer: React.ComponentClass<{} & {
+    links?: Links | undefined;
+}>;

test/fakes.js

@@ -15,2 +15,3 @@ "use strict";
 var container_1 = require("../src/container");
+exports.AnonymousExample = function (props) { return React.createElement("div", null, props.data); };
 var Example = (function (_super) {
@@ -17,0 +18,0 @@ __extends(Example, _super);

test/mobxLink.test.js

@@ -14,3 +14,3 @@ "use strict";
 var mobx_1 = require("mobx");
-var MobxLinks_1 = require("../src/MobxLinks");
+var mobxLink_1 = require("../src/mobxLink");
 var fakes_1 = require("./fakes");
@@ -27,3 +27,2 @@ describe('container/mobx', function () {
     ], Store.prototype, "data", void 0);
-    var mobxLinks;
     var links;
@@ -34,6 +33,5 @@ var store;
         store = new Store();
-        mobxLinks = new MobxLinks_1.MobxLinks({ store: store }, links);
     });
     it('supports initial state', function () {
-        mobxLinks.addLink(fakes_1.ExampleContainer, function (_a) {
+        links.addLink(fakes_1.ExampleContainer, mobxLink_1.mobxLink(function (_a) {
             var store = _a.store;
@@ -43,4 +41,4 @@ return {
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.ExampleContainer, null)));
@@ -50,3 +48,3 @@ expect(example.text()).toBe('initial');
     it('supports state changes', function () {
-        mobxLinks.addLink(fakes_1.ExampleContainer, function (_a) {
+        links.addLink(fakes_1.ExampleContainer, mobxLink_1.mobxLink(function (_a) {
             var store = _a.store;
@@ -56,4 +54,4 @@ return {
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.ExampleContainer, null)));
@@ -64,3 +62,3 @@ store.data = 'some other data';
     it('supports ownProps with initial state', function () {
-        mobxLinks.addLink(fakes_1.TwoPropsExampleContainer, function (_a, _b) {
+        links.addLink(fakes_1.TwoPropsExampleContainer, mobxLink_1.mobxLink(function (_a, _b) {
             var store = _a.store;
@@ -71,4 +69,4 @@ var first = _b.first;
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.TwoPropsExampleContainer, { first: "!!!" })));
@@ -79,3 +77,3 @@ expect(example.find('#first').text()).toBe('!!!');
     it('supports ownProps with state changes', function () {
-        mobxLinks.addLink(fakes_1.TwoPropsExampleContainer, function (_a, _b) {
+        links.addLink(fakes_1.TwoPropsExampleContainer, mobxLink_1.mobxLink(function (_a, _b) {
             var store = _a.store;
@@ -86,4 +84,4 @@ var first = _b.first;
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.TwoPropsExampleContainer, { first: "!!!" })));
@@ -96,3 +94,3 @@ store.data = 'some other data';
         var called = 0;
-        mobxLinks.addLink(fakes_1.TwoPropsExampleContainer, function (_a, _b) {
+        links.addLink(fakes_1.TwoPropsExampleContainer, mobxLink_1.mobxLink(function (_a, _b) {
             var store = _a.store;
@@ -104,4 +102,4 @@ var first = _b.first;
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.StatefulTwoPropsExample, null)));
@@ -115,3 +113,3 @@ fakes_1.setStatefulTwoPropsExampleState({ first: 'something else' });
         var called = 0;
-        mobxLinks.addLink(fakes_1.TwoPropsExampleContainer, function (_a, _b) {
+        links.addLink(fakes_1.TwoPropsExampleContainer, mobxLink_1.mobxLink(function (_a, _b) {
             var store = _a.store;
@@ -123,4 +121,4 @@ var first = _b.first;
             };
-        });
-        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { links: links },
+        }));
+        var example = enzyme_1.mount(React.createElement(Provider_1.Provider, { context: { stores: { store: store } }, links: links },
             React.createElement(fakes_1.StatefulTwoPropsExample, null)));
@@ -127,0 +125,0 @@ fakes_1.setStatefulTwoPropsExampleState({ first: 'something else' });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182993

increased by8.89%

Dev dependency count

17

decreased by-5.56%

Number of package files

56

increased by5.66%

Lines of code

2279

increased by4.16%

Number of lines in readme file

181

increased by3520%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedreact-redux@^5.0.5

• + Added@babel/runtime@7.26.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-redux@5.1.2(transitive)

• + Addedredux@4.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)