Я использую React Native, но у меня возникают проблемы при входе. Не могли бы вы помочь мне
- "response-native": "0.57.0",
- "реагировать-redux ":" ^ 5.0.7 ",
- " реакции-маршрутизатор ":" ^ 4.3.1 ",
- " реакции-маршрутизатор-родной ":" ^ 4.3.0 ",
- "redux": "^ 4.0.0",
- "redux-saga": "^ 0.16.0"
index.js
import React from 'react';
import { StyleSheet, View, } from 'react-native';
import { Provider } from 'react-redux';
import { NativeRouter, Route, } from 'react-router-native';
import store from './store';
import Main from './containers/main';
import Login from './containers/login';
const App = () => (
<Provider store={store}>
<NativeRouter>
<View style={{ flex: 1, }>
<Route exact path="/" component={Main} />
<Route path="/login" component={Login} />
</Root>
</NativeRouter>
</Provider>
);
export default App;
main.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-native';
import { FETCH_HOME_REQUEST } from '../../actions/types';
class HomeComponent extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const { dispatchHomeData, } = this.props;
dispatchHomeData && dispatchHomeData();
}
render() {
const { homeData, } = this.props;
const { status, error_no, data, } = homeData;
if(status === false && error_no == AUTH_FAIL) {
return <Redirect push to={'/login'} />;
}
return (
<View><Text>Show Home Data...</Text><View>
);
}
}
const mapStateToProps = (state, ownProps) => ({
homeData: state.home,
});
const mapDispatchToProps = (dispatch, ownProps) => ({
dispatchHomeData: () => dispatch({
type: FETCH_HOME_REQUEST,
token: true,
}),
});
const Home = connect(mapStateToProps, mapDispatchToProps)(HomeComponent);
export default Home;
login.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<View>
<TextInput
placeholder="UserName"
onChangeText={(username) => this.setState({username})}
/>
<TextInput
placeholder="Password"
onChangeText={(password) => this.setState({password})}
/>
<View>
<TouchableOpacity onPress={this.startLogin}>
<Text>Sign In</Text>
</TouchableOpacity>
</View>
</View>
);
}
startLogin = () => {
...
... // fetch request
...
// if success
const { history } = this.props;
if(history.index === 0) {
history.push('/');
}else {
history.goBack();
}
};
}
начальное состояние
state = {
home: {
data: null, // main data
isFetching: false, // Whether the request
status: true, // Has the request gone wrong
error_no: null, // Error code, zero means normal
error_msg: '', // The error message
},
token: '',
}
Процесс работы
- Вход в приложение (домашняя страница отображения по умолчанию)
Когда данные запрашиваются, поскольку токен пуст или проверка не пройдена, он автоматически перейдет на страницу входа.
Состояние становится следующим.
state = {
home: {
data: null,
isFetching: false,
status: false,
error_no: 401,
error_msg: 'auth fail',
},
token: '',
}
Введите пароль для входа в систему
Будет повторный переход для входа в систему, потому что предыдущий пристав сохранил данные.Я не знаю, должен ли я сбросить домашние данные или изменить решение о прыжке.Есть ли у вас хорошие предложения?