Bonne utilisation hook : useSelector()
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:
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:
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:
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:
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:
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:
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 :)
