React native

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:

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:

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

React native - REDUX