Why my Async method is not called from another screen using functional component in react native?

Question

I am trying to store data in Reducers file by calling Action file from my The login screen is implemented using function components.

I can't get the point where I was mistaken and why I can't able to call the action file from my login screen. so please help me to fix this issue. Thanks in advance.

Here is some code of my files

Login.js

import React, { useState } from 'react';
import { View, Text, SafeAreaView, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../Actions';
import { Images } from '../Helpers/imageConstants';
import { RFValue } from 'react-native-responsive-fontsize';
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
import CheckBox from 'react-native-check-box';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { InputText } from '../Components/inputText';
import { ButtonTouch } from '../Components/button';
import { SignInUser } from '../Actions/authAction';
import { showMessage } from 'react-native-flash-message';

const Login = ({ navigation }) => {
  const [isCheck, ischecked] = useState(false);
  const [userEmail, setUserEmail] = useState('');
  const [userPassword, setUserPassword] = useState('');

  const handleSubmitPress = () => {
    if (!userEmail) {
      showMessage({
        message: 'Please Enter Your Email',
        type: 'danger',
      });
    } else if (!userPassword) {
      showMessage({
        message: 'Please Enter Your Password',
        type: 'danger',
      });
    } else {
      console.log('comes in else');
      SignInUser({ userEmail, userPassword });
    }
  };

  return (
    <SafeAreaView style={styles.mainContainer}>
      <View style={{ flex: 1 }}>
        <Image source={Images.imageLogo} style={styles.imgLogo} />

        <View style={{ marginTop: 60 }}>
          <InputText
            Placeholder={'Email'}
            PlaceholderTextcolor={'#000'}
            onChangeText={(userEmail) => setUserEmail(userEmail)}
          />
        </View>

        <View style={{ marginTop: 20 }}>
          <InputText
            Placeholder={'Password'}
            PlaceholderTextcolor={'#000'}
            onChangeText={(userPassword) => setUserPassword(userPassword)}
            SecureTextEntry={true}
          />
        </View>

        <View style={styles.checkPwdView}>
          <CheckBox
            isChecked={isCheck}
            style={styles.checkVw}
            rightText={'Remeber Me'}
            rightTextStyle={styles.rightChekBoxText}
            onClick={() => {
              ischecked(!isCheck);
            }}
          />

          <TouchableOpacity style={styles.forgotPwdTouch}>
            <Text style={styles.forgotText}> Forgot Password ?</Text>
          </TouchableOpacity>
        </View>

        <View style={{ marginBottom: 60 }}>
          <ButtonTouch onPress={handleSubmitPress} title={'Login'} />
        </View>

        <View style={styles.dontAcntVw}>
          <TouchableHighlight>
            <Text style={styles.dontAcntTxt}>Dont have an account? </Text>
          </TouchableHighlight>

          <TouchableOpacity>
            <Text style={styles.signUpTxt}> Signup here</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Login;

let LoginComponent = connect(actions)(Login);
export { LoginComponent };

authAction.js

import { usersArrayData } from '../Helpers/usersArrayData';
import { LOGIN_SUCCESS } from '../Actions/type';

export const SignInUser = (email, password) => async (dispatch) => {
  console.log('log :--', email, password);
  var userData = { data: usersArrayData };
  console.log('come inn');
  usersArrayData.filter((item) => {
    console.log('come inn22222', usersArrayData);
    if (item.emailid === email && item.pass === password) {
      console.log('userdata===>>>', userData);

      return dispatch({ type: LOGIN_SUCCESS, payload: userData });
    } else {
      return false;
    }
  });
};

authReducer.js

import { LOGIN_SUCCESS } from "../Actions/type"

const INITIAL_STATE = {userData:[]}

const authReducer= (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case LOGIN_SUCCESS:
            return { ...state, userData: action.payload };
        default:
            return state;
    }
};

export default authReducer ;

Answer 1

I think you may add SignInUser in object function dispatch like this

const mapDispatchToProps = {
  SignInUser,
};
let LoginComponent = connect(null, mapDispatchToProps)(Login);
export { LoginComponent };