I'm having 2 navigators and I want to switch between them when I press the login Button.
But every time I dispatch an action via that login button, my application crashes. And I don't understand why, because when I change the initial-value in the Reducer itself, it works fine.
maybe someone got an idea?
Navigation Index File
export const Navigation = () => {
const userLogin = useSelector((state) => state.userLogin);
const { userData } = userLogin;
return (
<NavigationContainer>
{userData ? <AppNavigator /> : <OnBoardingNavigation />}
</NavigationContainer>
);
Action Creator
export const userLoginActionCreator = () => async (dispatch) => {
try {
dispatch({ type: ONBOARDING_USER_LOGIN_REQUEST });
setTimeout(() => {
// Get some fake data here.
const userData = { name: "Max Power", _id: "1337" };
dispatch({ type: ONBOARDING_USER_LOGIN_SUCCESS, payload: userData });
}, 3000);
} catch (error) {
dispatch({
type: ONBOARDING_USER_LOGIN_FAIL,
payload:
error.response && error.response.data.message ? error.response.data.message : error.message,
});
}
};
Reducer
export const userLoginReducer = (state = {}, action) => {
// export const userLoginReducer = (state = { userData: {} }, action) => {
switch (action.type) {
// 01 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_REQUEST:
return {
loading: true,
};
// 02 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_SUCCESS:
return {
loading: false,
userData: action.payload,
};
// 03 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_FAIL:
return {
error: action.payload,
loading: false,
};
default:
return state;
}
};
*** The login Button ***
const dispatch = useDispatch;
const loginFunction = async () => {
console.log("LoginFunction Pressed");
await dispatch(userLoginActionCreator());
};
return (
<SafeArea>
<Text>LoginScreen - New</Text>
<Button color="red" mode="contained" onPress={loginFunction} style={{ marginTop: 20 }}>
Login - Go to APP NAV
</Button>
</SafeArea>
);
};
FullReducer______
import {
ONBOARDING_USER_LOGIN_REQUEST,
ONBOARDING_USER_LOGIN_SUCCESS,
ONBOARDING_USER_LOGIN_FAIL,
} from "../constants/onBoardingConstants";
import { TEST_ACTION_REQUEST, TEST_ACTION_SUCCESS, TEST_ACTION_FAIL } from "../constants/test";
// export const userLoginReducer = (state = {}, action) => {
export const userLoginReducer = (state = { userData: { _id: null } }, action) => {
switch (action.type) {
// 01 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_REQUEST:
return {
loading: true,
};
// 02 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_SUCCESS:
return {
loading: false,
userData: action.payload,
};
// 03 --------------------------------------------------------
case ONBOARDING_USER_LOGIN_FAIL:
return {
error: action.payload,
loading: false,
};
default:
return state;
}
};
// -------------------------------------------------------------------------------
// -------------------------------------------------------------------------------
export const testReducer = (state = { theVariable: false }, action) => {
switch (action.type) {
// 01 --------------------------------------------------------
case TEST_ACTION_REQUEST:
return {
loading: true,
};
// 02 --------------------------------------------------------
case TEST_ACTION_SUCCESS:
return {
loading: false,
theVariable: action.payload,
};
// 03 --------------------------------------------------------
case TEST_ACTION_FAIL:
return {
error: action.payload,
loading: false,
};
default:
return state;
}
};
***Full Login-File ***____________
import React from "react";
import { View, Text } from "react-native";
import { SafeArea } from "../../components/safeArea";
import { Button } from "react-native-paper";
//Redux
import { useDispatch, useSelector } from "react-redux";
//ActionCreator
import { userLoginActionCreator } from "../../redux/actions/onBoardingActions";
export const LoginScreen = ({ navigation }) => {
const dispatch = useDispatch;
const loginFunction = async () => {
console.log("LoginFunction Pressed");
await dispatch(userLoginActionCreator());
};
return (
<SafeArea>
<Text>LoginScreen - New</Text>
<Button
color="red"
mode="contained"
onPress={() => navigation.navigate("RegisterScreen")}
style={{ marginTop: 20 }}
>
Register - Create Account
</Button>
<Button color="red" mode="contained" onPress={loginFunction} style={{ marginTop: 20 }}>
Login - Go to APP NAV
</Button>
</SafeArea>
);
};
const dispatch = useDispatch();
Also since userData is an Object-
{userData?._id ? <AppNavigator /> : <OnBoardingNavigation />}
Reducer file:-
export const userLoginReducer = (state = { userData: { _id: null }, loading: false, error: '' }, action) => {
switch (action.type) {
case ONBOARDING_USER_LOGIN_REQUEST:
return {
...state,
loading: true,
};
case ONBOARDING_USER_LOGIN_SUCCESS:
return {
...state,
loading: false,
userData: action.payload,
};
case ONBOARDING_USER_LOGIN_FAIL:
return {
...state,
error: action.payload,
loading: false,
};
default:
return state;
}
};
Login file:-
const {userData} = useSelector((state) => state.userLoginReducer);