react-navigation Cannot read property 'type' of null error in reducer - react-native

Question

Project
I am developing draw navigation with reactive navigation. (using redux)
Stack and tap nested navigation work fine
Error
If I add nested drawer navigation, the reducer throws an error.
The error screen is shown below.
This is my full code
https://bitbucket.org/byunghyunpark/luxlab-user-2/commits/all
Error related code
src/navigation/index.js
import React, { Component } from "react";
import { BackHandler } from "react-native";
import { connect } from "react-redux";
import { StackNavigator, DrawerNavigator, addNavigationHelpers, NavigationActions } from "react-navigation";
import NavigationStack from "./navigationStack";
class AppNavigation extends Component {
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
onBackPress = () => {
const { dispatch, navigationState } = this.props;
if (navigationState.stateForLoggedIn.index <= 1) {
BackHandler.exitApp();
return;
}
dispatch(NavigationActions.back());
return true;
};
render() {
const { navigationState, dispatch, isLoggedIn } = this.props;
const state = isLoggedIn
? navigationState.stateForLoggedIn
: navigationState.stateForLoggedOut;
return (
<NavigationStack navigation={addNavigationHelpers({ dispatch, state })}/>
);
}
}
const mapStateToProps = state => {
return {
isLoggedIn: state.loginReducer.isLoggedIn,
navigationState: state.navigationReducer
};
};
export default connect(mapStateToProps)(AppNavigation);
src/navigation/navigationStack.js
import { Platform, StyleSheet, Text, View, AsyncStorage, ScrollView } from 'react-native';
import { StackNavigator, TabNavigator, DrawerNavigator, DrawerItems } from 'react-navigation';
import MyRepairWait from '../components/repair/myRepairWait';
import MyRepairProgress from '../components/repair/myRepairProgress';
import MyRepairComplete from '../components/repair/myRepairComplete';
import MySalesWait from '../components/sales/mySalesWait';
import MySalesComplete from '../components/sales/mySalesComplete';
import Home from '../components/home';
import ProductList from '../components/buy/productList';
import PartnerList from '../components/map/partnerList';
import Login from '../components/member/login';
const MyRepairListTab = TabNavigator({
wait: { screen: MyRepairWait, navigationOptions: { tabBarLabel: '문의중' } },
progress: { screen: MyRepairProgress, navigationOptions: { tabBarLabel: '진행중' } },
complete: { screen: MyRepairComplete, navigationOptions: { tabBarLabel: '완료' } }
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#e91e63',
},
backBehavior: 'none',
}
)
const MySalesListTab = TabNavigator({
wait: { screen: MySalesWait, navigationOptions: { tabBarLabel: '문의중' } },
complete: { screen: MySalesComplete, navigationOptions: { tabBarLabel: '완료' } }
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#e91e63',
},
backBehavior: 'none',
}
)
const baseRoutes = {
home: { screen: Home },
productList: { screen: ProductList },
myRepairList: { screen: MyRepairListTab },
mySalesList: { screen: MySalesListTab },
partnerList: { screen: PartnerList },
login: { screen: Login },
};
const DrawerRoutes = {
Home: {
name: 'Home',
screen: StackNavigator(baseRoutes, { initialRouteName: 'home' })
},
ProductList: {
name: 'ProductList',
screen: StackNavigator(baseRoutes, { initialRouteName: 'productList' })
},
MyRepairList: {
name: 'MyRepairList',
screen: StackNavigator(baseRoutes, { initialRouteName: 'myRepairList' })
},
MySalesList: {
name: 'MySalesList',
screen: StackNavigator(baseRoutes, { initialRouteName: 'mySalesList' })
},
};
const DrawerNavigatorConfig = {
drawerWidth: 300,
drawerPosition: 'right',
contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>,
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
}
const navigator =
StackNavigator(
{
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
DrawerNavigatorConfig
),
},
...navigator
},
{
headerMode: 'none'
}
);
export default navigator;
src/reducers/index.js
import { combineReducers } from 'redux';
import navigationReducer from './navigationReducer';
import loginReducer from './loginReducer';
const AppReducer = combineReducers({
navigationReducer,
loginReducer
});
export default AppReducer;
src/reducers/navigationReducer.js
import { NavigationActions } from "react-navigation";
import AppNavigator from "../navigation/navigationStack";
import { Login, Logout } from "../actions/actionTypes";
const ActionForLoggedOut = AppNavigator.router.getActionForPathAndParams(
"login"
);
const ActionForLoggedIn = AppNavigator.router.getActionForPathAndParams(
"home"
);
const stateForLoggedOut = AppNavigator.router.getStateForAction(
ActionForLoggedOut
);
const stateForLoggedIn = AppNavigator.router.getStateForAction(
ActionForLoggedIn
);
const initialState = { stateForLoggedOut, stateForLoggedIn };
const navigationReducer = (state = initialState, action) => {
switch (action.type) {
case "##redux/INIT":
return {
...state,
stateForLoggedIn: AppNavigator.router.getStateForAction(
ActionForLoggedIn,
stateForLoggedOut
)
};
case Login:
return {
...state,
stateForLoggedIn: AppNavigator.router.getStateForAction(
ActionForLoggedIn,
stateForLoggedOut
)
};
case Logout:
return {
...state,
stateForLoggedOut: AppNavigator.router.getStateForAction(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "login" })]
})
)
};
default:
return {
...state,
stateForLoggedIn: AppNavigator.router.getStateForAction(
action,
state.stateForLoggedIn
)
};
}
};
export default navigationReducer;
src/components/home.js
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, ImageBackground, TouchableHighlight, Image, ScrollView, Alert, CameraRoll, AsyncStorage } from 'react-native';
import { NavigationActions } from "react-navigation";
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
const styles = StyleSheet.create({
container: {
flex: 1,
},
mainPhoto: {
flex: 1,
margin: 10,
marginBottom: 0,
justifyContent: 'center',
},
mainPhotoEnd: {
marginBottom: 10
},
mainOpacity: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.5)',
},
mainTitle: {
color: 'white',
fontSize: 30,
marginTop: 20,
marginLeft: 20,
marginRight: 20,
fontWeight: '700',
},
mainDescription: {
flex: 2.3,
marginTop: 5,
marginLeft: 20,
marginRight: 20,
color: 'white',
fontSize: 15,
fontWeight: '400',
},
alignRight: {
textAlign: 'right'
},
backgroundWhite: {
flex: 1,
backgroundColor: 'white'
},
headerRight: {
padding: 10
},
headerLeft: {
padding: 20
}
});
class HomeScreen extends React.Component {
navigate1 = () => {
console.log('click navigate1');
const navigate1 = NavigationActions.navigate({
routeName: "partnerList",
params: { name: "Shubhnik" }
});
this.props.navigation.dispatch(navigate1);
};
navigate2 = () => {
console.log('click navigate2');
const navigate2 = NavigationActions.navigate({
routeName: "myRepairList",
params: { name: "Shubhnik" }
});
this.props.navigation.dispatch(navigate2);
};
static navigationOptions = ({navigation}) => ({
drawerLabel: () => null,
title: 'LUXLAB',
headerStyle: {
backgroundColor: '#fff',
borderBottomWidth: 0,
elevation: 0,
},
headerTitleStyle: {
color: '#000',
fontSize: 20,
textAlign: 'center',
alignSelf: 'center',
},
headerRight: <Icon name="bars" size={30} color="#333" onPress={() => navigation.navigate('DrawerOpen')} style={styles.headerRight}/>,
headerLeft: <Icon name="map-marker" size={30} color="#333" onPress={() => navigation.navigate('partnerList')} style={styles.headerLeft} />
})
async componentDidMount() {
let user_info = await AsyncStorage.getItem('user_info');
user_info = JSON.parse(user_info).key;
console.log('storage1', user_info.key);
console.log('isloggedIn', this.props.isLoggedIn);
}
render() {
return (
<View style={styles.backgroundWhite}>
<TouchableHighlight
style={styles.container}
underlayColor="#fff"
onPress={this.navigate1}>
<ImageBackground
source={require('../assets/imgs/main1.jpg')}
style={[styles.mainPhoto, styles.mainOpacity]}>
<View style={styles.mainOpacity}>
<Text style={styles.mainTitle}>중고 명품 구매</Text>
<Text style={styles.mainDescription}>검증받은 다양한 명품들을{"\n"}간편하게 볼 수 있습니다</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
style={styles.container}
underlayColor="#fff"
onPress={this.navigate2}>
<ImageBackground
source={require('../assets/imgs/main2.jpg')}
style={styles.mainPhoto}>
<View style={styles.mainOpacity}>
<Text style={[styles.mainTitle, styles.alignRight]}>수선 견적 문의</Text>
<Text style={[styles.mainDescription, styles.alignRight]}>몇 가지 정보 입력으로{"\n"}수선 견적을 받아보세요</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
style={styles.container}
underlayColor="#fff"
onPress={this.navigate1}>
<ImageBackground
source={require('../assets/imgs/main3.jpg')}
style={[styles.mainPhoto, styles.mainPhotoEnd]}>
<View style={styles.mainOpacity}>
<Text style={styles.mainTitle}>중고 명품 판매</Text>
<Text style={styles.mainDescription}>몇 가지 정보 입력으로{"\n"}매매 견적을 받아보세요</Text>
</View>
</ImageBackground>
</TouchableHighlight>
</View>
)
}
}
const mapStateToProps = state => ({
isLoggedIn: state.loginReducer.isLoggedIn
});
const Home = connect(mapStateToProps, null)(HomeScreen);
export default Home;
Thanks!