[英]Why my Async method is not called from another screen using functional component in react native?
I am trying to store data in Reducers file by calling Action file from my The login screen is implemented using function components.我试图通过从我的登录屏幕调用 Action 文件来将数据存储在 Reducers 文件中。登录屏幕是使用函数组件实现的。
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登录.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 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 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 ;
I think you may add SignInUser in object function dispatch like this我认为您可以像这样在对象函数调度中添加 SignInUser
const mapDispatchToProps = {
SignInUser,
};
let LoginComponent = connect(null, mapDispatchToProps)(Login);
export { LoginComponent };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.