- fix Redux support, update Redux example

ReduxExample/package.json

@@ -17,6 +17,7 @@
     "react": "^16.4.1",
     "react-native": "^0.56.0",
     "react-native-router-flux": "file:..",
+    "react-navigation-redux-helpers": "^2.0.5",
     "react-redux": "^5.0.5",
     "redux": "^3.7.2"
   },

ReduxExample/src/a-reducer.js

@@ -1,11 +1,15 @@
-const INITIAL_STATE = {data: null};
+import { ActionConst } from 'react-native-router-flux';
+const INITIAL_STATE = { data: null, currentScene: 'home' };
 
-export default (state = INITIAL_STATE, {type, payload}) => {
-    switch (type) {
-        case 'data':
-            return {...state, data: payload};
+export default (state = INITIAL_STATE, { type, payload, routeName }) => {
+  switch (type) {
+    case ActionConst.FOCUS:
+      console.log('FOCUS event fired with scene parameter: ', routeName);
+      return { ...state, currentScene: routeName };
+    case 'data':
+      return { ...state, data: payload };
 
-        default:
-            return state
-    }
-}
+    default:
+      return state;
+  }
+};

ReduxExample/src/app.js

@@ -1,26 +1,46 @@
-import React from "react";
-import { createStore } from "redux";
-import { Provider, connect } from "react-redux";
-import { Scene, Actions, Router } from "react-native-router-flux";
-import Home from "./home";
-import Page from "./page";
-import reducers from "./reducers";
-import routeReducer from "./route-reducer";
+import React from 'react';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { Provider, connect } from 'react-redux';
+import { Scene, Actions, Router } from 'react-native-router-flux';
+import { reduxifyNavigator, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';
 
-const navigator = Actions.create(
+import Home from './home';
+import Page from './page';
+
+const AppNavigator = Actions.create(
   <Scene key="root" hideNavBar>
     <Scene key="home" component={Home} />
     <Scene key="page" component={Page} />
-  </Scene>
+  </Scene>,
 );
+import reducer from './a-reducer';
+
+// default nav reducer
+const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('home'));
+const navReducer = (state = initialState, action) => {
+  const nextState = AppNavigator.router.getStateForAction(action, state);
+  // Simply return the original `state` if `nextState` is null or undefined.
+  return nextState || state;
+};
+
+const appReducer = combineReducers({
+  nav: navReducer,
+  reducer,
+});
 
-const ReduxRouter = connect()(Router);
+const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
+const ReduxNavigator = reduxifyNavigator(AppNavigator, 'root');
+const mapStateToProps = state => ({
+  state: state.nav,
+});
+const ReduxRouter = connect(mapStateToProps)(Router);
+const store = createStore(appReducer, applyMiddleware(middleware));
 
 export default class App extends React.Component {
   render() {
     return (
-      <Provider store={createStore(reducers)}>
-        <ReduxRouter createReducer={() => routeReducer} navigator={navigator} />
+      <Provider store={store}>
+        <ReduxRouter navigator={ReduxNavigator} />
       </Provider>
     );
   }

ReduxExample/src/home.js

@@ -1,18 +1,16 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { connect } from "react-redux";
-import { Actions } from "react-native-router-flux";
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import { Actions } from 'react-native-router-flux';
 
 class Home extends React.Component {
   render() {
     return (
       <View style={styles.fill}>
         <View style={styles.header}>
-          <Text style={styles.text}>Current scene: "{this.props.name}"</Text>
+          <Text style={styles.text}>Current scene: "{this.props.currentScene}"</Text>
           <Text style={styles.text}>Welcome to the home scene.</Text>
-          <Text style={styles.data}>
-            {this.props.data ? this.props.data : "No data..."}
-          </Text>
+          <Text style={styles.data}>{this.props.data ? this.props.data : 'No data...'}</Text>
         </View>
         <TouchableOpacity
           style={styles.button}
@@ -29,27 +27,27 @@ class Home extends React.Component {
 
 const styles = {
   fill: {
-    flex: 1
+    flex: 1,
   },
   header: {
     flex: 2,
-    padding: 20
+    padding: 20,
   },
   text: {
     fontSize: 20,
-    textAlign: "center",
-    justifyContent: "center"
+    textAlign: 'center',
+    justifyContent: 'center',
   },
   data: {
     marginTop: 100,
     fontSize: 30,
-    textAlign: "center"
+    textAlign: 'center',
   },
   button: {
     flex: 1,
-    backgroundColor: "green",
-    justifyContent: "center"
-  }
+    backgroundColor: 'green',
+    justifyContent: 'center',
+  },
 };
 
 const mapStateToProps = ({ reducer }) => {
@@ -58,5 +56,5 @@ const mapStateToProps = ({ reducer }) => {
 
 export default connect(
   mapStateToProps,
-  {}
+  {},
 )(Home);

ReduxExample/src/page.js

@@ -1,20 +1,20 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-import { connect } from "react-redux";
-import { Actions } from "react-native-router-flux";
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import { Actions } from 'react-native-router-flux';
 
 class Page extends React.Component {
   render() {
     return (
       <View style={styles.fill}>
         <View style={styles.header}>
-          <Text style={styles.text}>Current scene: "{this.props.name}"</Text>
+          <Text style={styles.text}>Current scene: "{this.props.currentScene}"</Text>
           <Text style={styles.text}>This is an arbitrary page.</Text>
         </View>
         <TouchableOpacity
           style={styles.data}
           onPress={() => {
-            this.props.action("This is your data: [1, 2, 3]");
+            this.props.action('This is your data: [1, 2, 3]');
           }}
         >
           <Text style={styles.text}> Get data </Text>
@@ -26,9 +26,9 @@ class Page extends React.Component {
           }}
         >
           <Text style={styles.text}>
-            {" "}
-            {"<"}
-            -- Go to "home"{" "}
+            {' '}
+            {'<'}
+            -- Go to "home"{' '}
           </Text>
         </TouchableOpacity>
       </View>
@@ -38,37 +38,41 @@ class Page extends React.Component {
 
 const action = data => {
   return {
-    type: "data",
-    payload: data
+    type: 'data',
+    payload: data,
   };
 };
 
 const styles = {
   fill: {
-    flex: 1
+    flex: 1,
   },
   header: {
     flex: 4,
-    padding: 20
+    padding: 20,
   },
   text: {
     fontSize: 20,
-    textAlign: "center",
-    justifyContent: "center"
+    textAlign: 'center',
+    justifyContent: 'center',
   },
   data: {
     flex: 1,
-    backgroundColor: "cyan",
-    justifyContent: "center"
+    backgroundColor: 'cyan',
+    justifyContent: 'center',
   },
   button: {
     flex: 1,
-    backgroundColor: "yellow",
-    justifyContent: "center"
-  }
+    backgroundColor: 'yellow',
+    justifyContent: 'center',
+  },
+};
+
+const mapStateToProps = ({ reducer }) => {
+  return ({ data } = reducer);
 };
 
 export default connect(
-  null,
-  { action }
+  mapStateToProps,
+  { action },
 )(Page);

ReduxExample/yarn.lock

@@ -4861,7 +4861,7 @@ [email protected]:
     react-native-dismiss-keyboard "1.0.0"
 
 "react-native-router-flux@file:..":
-  version "4.0.0-beta.43"
+  version "4.0.0"
   dependencies:
     lodash.isequal "^4.5.0"
     opencollective "^1.0.3"
@@ -4961,6 +4961,12 @@ [email protected]:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
+react-navigation-redux-helpers@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.5.tgz#2c2412d5b7184bbcee850b5d2c350cca34ad6cf6"
+  dependencies:
+    invariant "^2.2.2"
+
 [email protected]:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.6.0.tgz#2f526194f4360e56c2702e736887449acc2080dc"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",
@@ -64,7 +64,8 @@
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/Example/", "<rootDir>/ReduxExample/"
+      "<rootDir>/Example/",
+      "<rootDir>/ReduxExample/"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-navigation)"

src/Router.js

@@ -79,7 +79,20 @@ class App extends React.Component {
   };
 
   render() {
-    const AppNavigator = this.props.navigator;
+    const { dispatch, state, navigator: AppNavigator } = this.props;
+    if (dispatch && state) {
+      navigationStore.externalDispatch = dispatch;
+      navigationStore.externalState = state;
+      return (
+        <AppNavigator
+          dispatch={navigationStore.dispatch}
+          state={navigationStore.state}
+          ref={(navigatorRef) => {
+            navigationStore.setTopLevelNavigator(navigatorRef);
+          }}
+        />
+      );
+    }
     return (
       <AppNavigator
         onNavigationStateChange={navigationStore.onNavigationStateChange}