Discussion :

[TOMITOMAS]

Hello la commu,


je mets doucement les mains dans le code qu'un ami à fait dans l'idée d'ajouter de nouvelle fonctionnalité à notre appli.
1ère découverte de réact, donc excusez d'avance mes questions

on utilise un reducer :
dans un fichier credentials.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
export const INITIAL_CREDENTIALS = {
  configReload: false,
  dataReload: false,
  dataReloadAuto: false,
  imgSetup: false,
  imgSetupAdd: false,
  imgSetupRemove: false,
  // ... et bien d'autres ... 
}
 
const creditentialsReducer = (state = INITIAL_CREDENTIALS, action) => {
  switch (action.type) {
    case 'SET_CREDENTIALS': {
      return {
        ...state,
        ...action.value,
      };
    }
    default:
      return state;
  }
};
 
export default creditentialsReducer;

qui est mis à jour sur le store par un event en particulier :

Code :

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

store.dispatch({ type: 'SET_CREDENTIALS', value: appProfil });

jusque là tout va bien


Je souhaite ensuite utiliser ces infos pour afficher ou non certains éléments à l'écran.
Ce qui est actuellement fait :
screens/preferences.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
return (
    <ScrollView style={{ backgroundColor: 'transparent' }}>
      <View style={[styles.card, { backgroundColor: theme.colors.bgColor, borderRadius: theme.roundness }]}>
        {prefDataCred &&
          <List.Item
            title={t("Gestion des données")}
            left={() => <List.Icon icon="database-settings" color={theme.colors.primary} />}
            right={() => <List.Icon icon="chevron-right" color={theme.colors.text} />}
            onPress={() => { props.navigation.navigate('PrefDataManager'); }}
          />
        }
      </View>
    </ScrollView>
);

`prefDataCred` est aujourd'hui défini de la manière suivante :

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
  const credConfigReload = useSelector(state => state.creditentialsReducer.configReload);
  const credDataReload = useSelector(state => state.creditentialsReducer.dataReload);
  const credDataReloadAuto = useSelector(state => state.creditentialsReducer.dataReloadAuto);
  const credImgSetup = useSelector(state => state.creditentialsReducer.imgSetup);
  const credClearCache = useSelector(state => state.creditentialsReducer.clearCache);
  const credSystemSetup = useSelector(state => state.creditentialsReducer.systemSetup);
 
  const prefDataCred = (
    credConfigReload ||
    credDataReload ||
    credDataReloadAuto ||
    credImgSetup ||
    credClearCache ||
    credSystemSetup
  );

15 lignes de code pour défini un élément, ca fait beaucoup, et c'est pas très lisible !
d'autant plus que ça n'est pas le seul éléments, j'ai plusieurs dizaines d'éléments que je veux contrôler en fonction de différents droits dispo dans `creditentialsReducer`, du coup ça fait des lignes et des lignes de déclarations "pour rien", je trouve pas ça ultra propre et aimerait trouver une meilleure façon de factoriser tout ça.

j'avais en tête de l'utiliser plutôt de cette façon : (l'objectif est bien de savoir si au moins un de ces éléments est à 'true')

Code :

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

1
2
3
const prefDataCred = (
    getCredentials('configReload', 'dataReload', 'dataReloadAuto', 'imgSetup', 'clearCache', 'systemSetup')
  );

avec la fonction `getCredentials` définis dans un fichier helper comme suit :

Code :

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

1
2
3
4
5
6
7
8
export const getCredentials = (...creds) => {
    var crendential = false;
    creds.forEach(function (item) {
        crendential = crendential || useSelector(state => state.creditentialsReducer[item]);
    });
 
    return crendential;
}

sauf que là mon pote me dit : "oulalalala malheureux ! c'est interdit de faire ça. t'essaies d'appeler un hook (useSelector) de façon conditionnelle, c'est interdit..."

un avis ?
est ce que ma proposition est si déconante que ca ?
une autre proposition de votre côté ?

merci pour votre aide

[gwyohm]

hello,

En effet, appeler de façon conditionnelle un hook peut amener des bugs difficiles à comprendre.
Peut être tu devrais faire un peu différemment:

Code :

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

1
2
3
4
5
6
 
export const getCredentials = (...creds) => {
    const mapped = creds.map((item) => useSelector(state => state.creditentialsReducer[item]));
 
    return mapped.some((granted) => granted);
}

Les différences avec ton code de base:

• pour chaque argument passé à getCredentials, on a bien un appel à useSelector
• on passe par map ce qui évite d'avoir à modifier dans l'itérateur une variable définie dans un scope plus haut
• en utilisant mapped.some, on reproduit le || que tu avais dans ton code