React (native) redux utilisation de mapStateToProps
Je fait un projet sur react native
Je ne sait pas si j'ai bien compris mais j'ai prévue d'utiliser redux pour transférer l'idantifiant de l'utilisateur vers une autre page après s'être authentifier.
Lorsque j'utilise la fonction dispatch je retrouve les donné grâce au console log mais jet n'arrive pas a les récupérer sur la prochaine page voici mon code:
LoginScreen.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
class LoginScreen extends Component {
state = {
UserLogin: '',
UserPassword: '',
};
static navigationOptions = {
header: null,
};
//gestion du boutton login
loginButtonHandler = () => {
if((this.state.UserLogin === '') || (this.state.UserPassword === '')){
Alert.alert('Entrer un pseudo et un mot de passe')
}else{
//envoi du mdp et du login au serveur
fetch(
'http://192.168.1.109/gsbrapports/connection/traitement/traiterconnexion.php',
{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify({
login: this.state.UserLogin,
mdp: this.state.UserPassword
})
}
)
.then((response) => response.json())
.then((responseJson) => {
if(responseJson ==='fail'){
// si Pseudo ou mot de passe erroné
Alert.alert('Pseudo ou mot de passe erroné');
}else{
// si succes go to home et envoi de la reponce
this.props.onLogin(responseJson);
this.props.navigation.navigate("Home");
}
})
.catch((error) => {
console.error(error);
})
}
};
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.loginContainer}>
<Image resizeMode="contain" style={styles.logo} source={require('../../../assets/images/logoGSB.png')} />
</View>
<View style={styles.formContainer}>
<TextInput style = {styles.input}
autoCapitalize="none"
onChangeText={UserLogin => this.setState({UserLogin})}
autoCorrect={false}
keyboardType='default'
returnKeyType="next"
placeholder='Pseudo'
placeholderTextColor='rgba(225,225,225,0.7)'/>
<TextInput style = {styles.input}
returnKeyType="go"
onChangeText={UserPassword => this.setState({UserPassword})}
placeholder='Password'
placeholderTextColor='rgba(225,225,225,0.7)'
secureTextEntry/>
<TouchableOpacity style={styles.buttonContainer} onPress={this.loginButtonHandler}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}
}
const mapDispatchToProps = (dispatch) => ({
onLogin: (user) => {
dispatch(SingnIn(user));
},
});
export default connect(null, mapDispatchToProps)(LoginScreen); |
authReducer.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const AuthReducer = (state = initialState, action) => {
switch (action.type) {
case 'SIGN_IN':
console.log(action.payload);
return { ...state,
user: action.payload
};
case 'GET_USER':
return action.payload;
case 'SIGN_OUT':
return {...state, isSignedIn: false};
default:
return state;
}
};
export default AuthReducer; |
secondScreen,js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
export class Try extends Component {
render() {
return (
<View>
{console.log(this.props.userId) }
</View>
)
}
}
const mapStateToProps = state => {
return {
userId: state.auth
};
};
export default connect(mapStateToProps)(Try) |
