Refactorisation des reducers nécessaires
Description
Avec les différentes refactorisation, updates du code etc. il est nécessaire de modifier les reducers car je constate des problème immutabilité des valeurs du "state" (conflit, modification concurrente...).
Voici un exemple lors de plusieurs clics sur une commune :
immutableStateInvariantMiddleware.ts:25 Uncaught Error: Invariant failed: A state mutation was detected between dispatches, in the path 'setTerritoire.comm.geom.listeners_.change.1'. This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)
at invariant (immutableStateInvariantMiddleware.ts:25:1)
at immutableStateInvariantMiddleware.ts:250:1
at Object.measureTime (utils.ts:10:1)
at immutableStateInvariantMiddleware.ts:243:1
at onLoad (Feature.js:19:1)
at FeatureBox.js:18:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
Analyse
La syntaxe suivante provoque cette erreur. Je pense que c'est la façon de mettre la commune à jour qui provoque ce soucis :
case 'SET_COMM':
return {
...state,
epci: action.comm.epci,
comm: action.comm,
}
Solution
Redux met à disposition des outils (ici createReducer
) pour faciliter la gestion du state et éviter une mise à jour conflictuelle des propriétés de ce dernier.
Voici la doc :
Après utilisation de createReducer
sur le Reducer setTerritoire
, je n'obtiens plus d'erreur.
import { createReducer } from "@reduxjs/toolkit";
const setTerritoire = createReducer(initialState, {
'SET_EPCI': (state, action) => {
state.comm = null;
state.epci = action.epci;
},
...
}
export default setTerritoire
Cette syntaxe est d'autant plus simplifiée avec la suppression du switch.