我已经成功制作了一个登录表单,并使用redux-thunk来登录我的应用程序中的用户,以从互联网上的不同链接中学习。但是现在,我不知道如何在启动应用程序时检查用户是否已经登录。我需要检查用户在应用启动时是否已登录并进行相应的重定向。
我尝试为此创建一个动作,该动作会在调用时返回状态,但是我无法正确使用它。
这是我当前的代码。
App.js:
class HomeScreen extends React.Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<LoginScreen />
</Provider>
);
}
}
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Index: IndexScreen,
SignUp: SignUpScreen
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
LoginScreen.js:
class LoginScreen extends React.Component {
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text){
this.props.passwordChanged(text);
}
onButtonPress(){
const {email, password} = this.props;
this.props.loginUser({email, password});
}
renderError(){
if(this.props.error){
return(
<View style={{backgroundColor:'white'}}>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
</View>
);
}
}
renderButton(){
if(this.props.loading){
return <Spinner color='red' />;
}
return(
<Button dark
style={styles.signin}
onPress={this.onButtonPress.bind(this)}>
<Text style={styles.alltext}>SIGN IN</Text>
</Button>
);
}
render() {
return (
<View style={styles.container}>
<Form style={styles.signinform}>
<Item floatingLabel>
<Label>Email</Label>
<Input keyboardType="email-address" onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}/>
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
secureTextEntry={true} />
</Item>
</Form>
{this.renderError()}
{this.renderButton()}
</View>
);
}
}
const mapStateToProps = ({auth}) => {
const {email, password, error, loading} = auth;
return { email, password, error, loading };
};
export default connect(mapStateToProps,{
emailChanged,
passwordChanged,
loginUser
})(LoginScreen);
AuthReducer:
const INITIAL_STATE = {
email: '',
password: '',
user:null,
error:'',
loading:false
};
export default (state = INITIAL_STATE,action) => {
switch (action.type) {
case EMAIL_CHANGED:
return { ...state, email: action.payload };
case PASSWORD_CHANGED:
return { ...state, password: action.payload };
case LOGIN_USER:
return { ...state, loading: true, error:'' };
case LOGIN_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload };
case LOGIN_USER_FAIL:
return {...state, error: 'Authentication Failed.',password:'',loading:false};
case USER_INFO:
return state;
default:
return state;
}
}
Actions.js
const fetcher = new FetchService;
export const emailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload: text
};
};
export const passwordChanged = (text) => {
return {
type: PASSWORD_CHANGED,
payload: text
};
};
export const userInfo = (text) => {
return {
type: USER_INFO,
payload: text
};
};
export const loginUser = ({email, password}) => {
const data = new FormData();
data.append('email', email);
data.append('password', password);
console.log('action ma' + email);
return (dispatch)=>{
dispatch({type: LOGIN_USER});
fetcher.adminAuth((err, responsej) => {
if(err) {
console.log("Seems like there is no/poor internet connectivity" + err);
}
if (responsej.status != 'success') {
console.log('error');
dispatch({type:LOGIN_USER_FAIL, payload: responsej});
} else {
console.log('success');
dispatch({type:LOGIN_USER_SUCCESS, payload: responsej});
}
}, data);
};
};
我需要检查用户在应用启动时是否已登录并进行相应的重定向。如何在App.js中检查用户登录状态?