Bonjour,

J'utilise Redux pour mon application react native, et j'aimerais avoir des astuces pour l'utiliser proprement et efficacement

Ce que je veux faire :

Stocker des elements dans le store -> localstorage (elements de connexion)
Verifier si l’utilisateur est connecté pour afficher la bonne stack
Mon slice

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
import { createSlice } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const initialState = {
  userInfo: { id: null, role: null },
  isLoggedIn: false, // Ajout de la propriété `isLoggedIn`
};
 
const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    login: (state, action) => {
      // Simulation de la connexion avec les informations fournies (email, mot de passe)
      state.userInfo = { id: 1, role: 2 };
 
      // Stockez les informations utilisateur dans AsyncStorage
      AsyncStorage.setItem('userInfo', JSON.stringify(state.userInfo));
      state.isLoggedIn = true;
    },
    logout: async (state) => {
      // Réinitialisation des informations utilisateur après la déconnexion
      state.userInfo = { id: null, role: null };
 
      // Suppression des informations utilisateur d'AsyncStorage lors de la déconnexion
      await AsyncStorage.removeItem('userInfo');
      state.isLoggedIn = false;
    },
  },
});
 
export const { login, logout } = authSlice.actions;
 
export default authSlice.reducer;
Ma gestion des stack

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
 
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
 
import AuthStack from './AuthStack';
import UserStack from './UserStack';
import AdminStack from './AdminStack';
 
const AppNav = () => {
 
  const userRole = useSelector((state) => state.auth.userInfo.role);
  const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); // Ajout de la vérification d'authentification
 
  console.log(userRole);
  console.log(isLoggedIn);
 
  if (!isLoggedIn) { // Vérification de l'état de connexion
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size={'large'} />
      </View>
    );
  }
 
  let StackToRender = AuthStack; // Par défaut, afficher AuthStack s'il y a un problème avec les rôles ou l'identification
 
  switch (userRole) {
    case 2:
      StackToRender = UserStack;
      break;
    case 3:
      StackToRender = AdminStack;
      break;
    default:
      StackToRender = AuthStack;
      break;
  }
 
  return (
    <NavigationContainer>
      <StackToRender />
    </NavigationContainer>
  );
};
export default AppNav;
Comment je peux verifier si mon utilisateur est connecté jaffiche la bonne stack selon son role et si il est pas connecté on affiche la stack auth

Merci d'avance