用户登录后,如何从我的React Native应用程序中的Redux检索用户数据?

时间:2019-04-02 11:55:59

标签: react-native login react-redux redux-thunk

我已经成功制作了一个登录表单,并使用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中检查用户登录状态?

0 个答案:

没有答案