Redux middleware for new event system (#3399)

* Add Redux bindings for new event system

* construct -> create

* react-navigation-redux-helpers

examples/ReduxExample/App.js

@@ -1,21 +1,21 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import { AppRegistry } from 'react-native';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 
 import AppReducer from './src/reducers';
 import AppWithNavigationState from './src/navigators/AppNavigator';
+import { middleware } from './src/utils/redux';
+
+const store = createStore(
+  AppReducer,
+  applyMiddleware(middleware),
+);
 
 class ReduxExampleApp extends React.Component {
-  store = createStore(AppReducer);
-
   render() {
     return (
-      <Provider store={this.store}>
+      <Provider store={store}>
         <AppWithNavigationState />
       </Provider>
     );

examples/ReduxExample/package.json

@@ -25,9 +25,10 @@
     "prop-types": "^15.5.10",
     "react": "16.2.0",
     "react-native": "^0.52.0",
+    "react-navigation": "link:../..",
+    "react-navigation-redux-helpers": "^1.0.0",
     "react-redux": "^5.0.6",
-    "redux": "^3.7.2",
-    "react-navigation": "link:../.."
+    "redux": "^3.7.2"
   },
   "devDependencies": {
     "babel-jest": "^21.0.0",

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -6,6 +6,7 @@ import { addNavigationHelpers, StackNavigator } from 'react-navigation';
 import LoginScreen from '../components/LoginScreen';
 import MainScreen from '../components/MainScreen';
 import ProfileScreen from '../components/ProfileScreen';
+import { addListener } from '../utils/redux';
 
 export const AppNavigator = StackNavigator({
   Login: { screen: LoginScreen },
@@ -19,28 +20,6 @@ class AppWithNavigationState extends React.Component {
     nav: PropTypes.object.isRequired,
   };
 
-  _actionEventSubscribers = new Set();
-
-  _addListener = (eventName, handler) => {
-    eventName === 'action' && this._actionEventSubscribers.add(handler);
-    return {
-      remove: () => {
-        this._actionEventSubscribers.delete(handler);
-      },
-    };
-  };
-
-  componentDidUpdate(lastProps) {
-    const lastState = lastProps.nav;
-    this._actionEventSubscribers.forEach(subscriber => {
-      subscriber({
-        lastState: lastProps.nav,
-        state: this.props.nav,
-        action: this.props.lastAction,
-      });
-    });
-  }
-
   render() {
     const { dispatch, nav } = this.props;
     return (
@@ -48,7 +27,7 @@ class AppWithNavigationState extends React.Component {
         navigation={addNavigationHelpers({
           dispatch,
           state: nav,
-          addListener: this._addListener,
+          addListener,
         })}
       />
     );
@@ -57,7 +36,6 @@ class AppWithNavigationState extends React.Component {
 
 const mapStateToProps = state => ({
   nav: state.nav,
-  lastAction: state.lastAction,
 });
 
 export default connect(mapStateToProps)(AppWithNavigationState);

examples/ReduxExample/src/reducers/index.js

@@ -36,10 +36,6 @@ function nav(state = initialNavState, action) {
   return nextState || state;
 }
 
-function lastAction(state = null, action) {
-  return action;
-}
-
 const initialAuthState = { isLoggedIn: false };
 
 function auth(state = initialAuthState, action) {
@@ -54,7 +50,6 @@ function auth(state = initialAuthState, action) {
 }
 
 const AppReducer = combineReducers({
-  lastAction,
   nav,
   auth,
 });

examples/ReduxExample/src/utils/redux.js

@@ -0,0 +1,15 @@
+import {
+  createReactNavigationReduxMiddleware,
+  createReduxBoundAddListener,
+} from 'react-navigation-redux-helpers';
+
+const middleware = createReactNavigationReduxMiddleware(
+  "root",
+  state => state.nav,
+);
+const addListener = createReduxBoundAddListener("root");
+
+export {
+  middleware,
+  addListener,
+};

examples/ReduxExample/yarn.lock

@@ -5231,6 +5231,12 @@ react-native@^0.52.0:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
+react-navigation-redux-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-1.0.0.tgz#baca0d080c6d486a06cbf1d54056794e33d22cca"
+  dependencies:
+    invariant "^2.2.2"
+
 "react-navigation@link:../..":
   version "0.0.0"
   uid ""