Discussion :

[winterstones]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[gwyohm]

Salut,

Je te conseille vivement d'installer l'extension Redux pour ton navigateur, ca te permettra de voir un peu ce que tu as dans ton store.
Je dis ca parce que je pense que dans ton store, tes infos sont dans user.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const mapStateToProps = state =>  {
  return {
      // userId: state.auth
      userId: state.user.auth
  };
};

c'est pas mieux ?

[winterstones]

Merci pour l'extension je ne savait pas qu'il en avait un pour redux.

Par contre je n'arrive toujours pas.

Je ne comprend pas une chose.

Quand je fait console.log(this.props) je devrai trouver "userId" or ce n'est pas le cas.

La fonction mapStateToProps a fonctionné ou pas

[gwyohm]

La fonction mapStateToProps a fonctionné ou pas

Je ne sais pas..
Tu vois quoi dans ton store avec l'extension ?
Tu as essayé ce que je t'ai proposé ?
Tu peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(state)

avant le return dans ton mapStateToProps

[winterstones]

je travail sur react native donc je doit utiliser le package "redux-logger" voici ce qu'il affiche lorsque j'utilise le login:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
%c prev state color: #9E9E9E; font-weight: bold Object {
[00:35:24]   "UserReducer": Object {},
[00:35:24]   "auth": Object {
[00:35:24]     "user": null,
[00:35:24]   },
[00:35:24] }
%c next state color: #4CAF50; font-weight: bold Object {
[00:35:24]   "UserReducer": Object {},
[00:35:24]   "auth": Object {
[00:35:24]     "user": Object {
[00:35:24]       "0": "a123",
[00:35:24]       "1": "Try",
[00:35:24]       "2": "Me",
[00:35:24]       "id": "a123",
[00:35:24]       "nom": "Try",
[00:35:24]       "prenom": "Me",
[00:35:24]     },
[00:35:24]   },
[00:35:24] }

console.log(state) affiche undifined.

après en utilisant le package React-devTools
je remarque que l'import de Connect de "react-redux" de la deuxième page n'est pas fonctionnel.
alors que je trouve facilement l'import pour ma page login.

[winterstones]

J'ai recommencé mon projet avec une version de react-redux ancienne et sa marche.