Как получить пользовательские данные из Redx в моем собственном приложении, когда пользователь вошел в систему? - PullRequest
0 голосов
/ 02 апреля 2019

Я успешно создал форму входа и использовал 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...