Official redux support (#3675)

* the people have spoken

* support for projects without redux

lib/src/Navigation.ts

@@ -56,6 +56,14 @@ export class Navigation {
     return this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
   }
 
+  /**
+   * Utility helper function like registerComponent,
+   * wraps the provided component with a react-redux Provider with the passed redux store
+   */
+  public registerComponentWithRedux(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider: any, reduxStore: any): ComponentType<any> {
+    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, ReduxProvider, reduxStore);
+  }
+
   /**
    * Reset the app to a new layout
    */

lib/src/components/ComponentRegistry.ts

@@ -7,9 +7,9 @@ import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 export class ComponentRegistry {
   constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver) { }
 
-  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any> {
+  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider?: any, userStore?: any): ComponentType<any> {
     const OriginalComponentClass = getComponentClassFunc();
-    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store, this.componentEventsObserver);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store, this.componentEventsObserver, ReduxProvider, userStore);
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
     AppRegistry.registerComponent(componentName, () => NavigationComponent);
     return NavigationComponent;

lib/src/components/ComponentWrapper.test.tsx

@@ -134,4 +134,33 @@ describe('ComponentWrapper', () => {
     tree.unmount();
     expect(componentEventsObserver.unmounted).toHaveBeenCalledTimes(1);
   });
+
+  describe(`register with redux store`, () => {
+    class MyReduxComp extends React.Component<any> {
+      static get options() {
+        return { foo: 123 };
+      }
+      render() {
+        return (
+          <Text>{this.props.txt}</Text>
+        );
+      }
+    }
+    function mapStateToProps(state) {
+      return {
+        txt: state.txt
+      };
+    }
+    const ConnectedComp = require('react-redux').connect(mapStateToProps)(MyReduxComp);
+    const ReduxProvider = require('react-redux').Provider;
+    const initialState = { txt: 'it just works' };
+    const reduxStore = require('redux').createStore((state = initialState) => state);
+
+    it(`wraps the component with a react-redux provider with passed store`, () => {
+      const NavigationComponent = ComponentWrapper.wrap(componentName, ConnectedComp, store, componentEventsObserver, ReduxProvider, reduxStore);
+      const tree = renderer.create(<NavigationComponent componentId={'theCompId'} />);
+      expect(tree.toJSON()!.children).toEqual(['it just works']);
+      expect((NavigationComponent as any).options).toEqual({ foo: 123 });
+    });
+  });
 });

lib/src/components/ComponentWrapper.tsx

@@ -8,7 +8,9 @@ export class ComponentWrapper {
     componentName: string,
     OriginalComponentClass: React.ComponentType<any>,
     store,
-    componentEventsObserver): React.ComponentType<any> {
+    componentEventsObserver,
+    ReduxProvider?,
+    reduxStore?): React.ComponentType<any> {
 
     class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
 
@@ -51,6 +53,25 @@ export class ComponentWrapper {
 
     ReactLifecyclesCompat.polyfill(WrappedComponent);
     require('hoist-non-react-statics')(WrappedComponent, OriginalComponentClass);
-    return WrappedComponent;
+
+    if (reduxStore) {
+      return ComponentWrapper.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore);
+    } else {
+      return WrappedComponent;
+    }
+  }
+
+  static wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore): React.ComponentType<any> {
+    class ReduxWrapper extends React.Component<any, any> {
+      render() {
+        return (
+          <ReduxProvider store={reduxStore}>
+            <WrappedComponent {...this.props} />
+          </ReduxProvider>
+        );
+      }
+    }
+    require('hoist-non-react-statics')(ReduxWrapper, WrappedComponent);
+    return ReduxWrapper;
   }
 }