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>
  );
};

CodePudding user response：

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);