shubhnik / redux-react-navigation-demos

React-Native + Redux + Redux-Persist + React Navigation ( Authentication Flow with Redux demos)
152 stars 55 forks source link

help upgrading example to react-navigation 1.5.8+ #10

Closed gianpaj closed 6 years ago

gianpaj commented 6 years ago

I'm trying to upgrade the nestedNavigators branch but I'm getting this error:

null is not an object (evaluating 'action.type')

getStateForAction
    StackRouter.js:164:17
<unknown>
    navigationReducer.js:25:2
loadModuleImplementation
    require.js:178:12
<unknown>
    store.js:11
loadModuleImplementation
    require.js:178:12
<unknown>
    App.js:12
loadModuleImplementation
    require.js:178:12
<unknown>
    index.js:2
loadModuleImplementation
    require.js:178:12
guardedLoadModule
    require.js:123:45
global code
    <unknown file>:0
diff --git a/App.js b/App.js
index ef96f38..16a51f1 100644
--- a/App.js
+++ b/App.js
@@ -9,8 +9,8 @@ import { Platform, StyleSheet, Text, View } from "react-native";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/es/integration/react";
 // import store from './store'
-import AppNavigation from "./src/Navigation";
 import configureStore from "./store";
+import AppNavigation from "./src/Navigation";

 const { store, persistor } = configureStore();

diff --git a/package.json b/package.json
index bf156db..750d0c9 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,11 @@
   "dependencies": {
     "react": "16.0.0-beta.5",
     "react-native": "0.49.3",
-    "react-navigation": "1.0.0-beta.15",
+    "react-navigation": "1.5.8",
+    "react-navigation-redux-helpers": "^1.0.2",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",
-    "redux-persist": "^5.2.2"
+    "redux-persist": "^5.7.0"
   },
   "devDependencies": {
     "babel-jest": "21.2.0",
diff --git a/src/Navigation/index.js b/src/Navigation/index.js
index d938945..f252a9b 100644
--- a/src/Navigation/index.js
+++ b/src/Navigation/index.js
@@ -2,8 +2,12 @@ import React, { Component } from "react";
 import { BackHandler } from "react-native";
 import { connect } from "react-redux";
 import { addNavigationHelpers, NavigationActions } from "react-navigation";
+import { createReduxBoundAddListener } from "react-navigation-redux-helpers";
+
 import NavigationStack from "./navigationStack";

+const addListener = createReduxBoundAddListener("root");
+
 class AppNavigation extends Component {
   componentDidMount() {
     BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
@@ -29,7 +33,9 @@ class AppNavigation extends Component {
       ? navigationState.stateForLoggedIn
       : navigationState.stateForLoggedOut;
     return (
-      <NavigationStack navigation={addNavigationHelpers({ dispatch, state })} />
+      <NavigationStack
+        navigation={addNavigationHelpers({ dispatch, state, addListener })}
+      />
     );
   }
 }
diff --git a/store.js b/store.js
index 85743e1..5d24455 100644
--- a/store.js
+++ b/store.js
@@ -1,10 +1,11 @@
-import { createStore, combineReducers } from "redux";
+import { createStore, combineReducers, applyMiddleware } from "redux";
 import {
   persistCombineReducers,
   persistStore,
   persistReducer
 } from "redux-persist";
 import storage from "redux-persist/es/storage";
+import { createReactNavigationReduxMiddleware } from "react-navigation-redux-helpers";

 import counterReducer from "./src/Reducers/counterReducer";
 import NavigationReducer from "./src/Reducers/navigationReducer";
@@ -36,15 +37,24 @@ const reducer = {
 const CounterReducer = persistReducer(config, counterReducer);
 const LoginReducer = persistReducer(config1, loginReducer);

-// combineReducer applied on persisted(counterReducer) and NavigationReducer
+// combineReducer applied on CounterReducer + persisted(loginReducer) + NavigationReducer
 const rootReducer = combineReducers({
   CounterReducer,
   NavigationReducer,
   LoginReducer
 });

+// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener
+const middleware = createReactNavigationReduxMiddleware(
+  "root",
+  state =>
+    state.LoginReducer.isLoggedIn == true
+      ? state.NavigationReducer.stateForLoggedIn
+      : state.NavigationReducer.stateForLoggedOut
+);
+
 function configureStore() {
-  let store = createStore(rootReducer);
+  let store = createStore(rootReducer, applyMiddleware(middleware));
   let persistor = persistStore(store);
   return { persistor, store };
 }
s-bhat99 commented 6 years ago

I am seeing the same issue. Where you able to resolve this?

gianpaj commented 6 years ago

i haven't tried again. i'm still at

"react-navigation-redux-helpers": "^1.0.1"
"react-redux": "^5.0.6",
"redux": "^3.7.2",
gianpaj commented 6 years ago

closign. i think the issue was somewhere else