Comment corriger l'erreur "A non-serializable value was detected in the state" lors de l'utilisation du toolkit Redux ?
Lorsque vous créez vos composants avec la librairie React, ceux-ci ont des limites qui peuvent poser problème selon la taille de votre application ou votre façon de coder. Les propriétés d'un composant sont accessibles uniquement en lecture seule, et les états ne peuvent être liés qu'à un seul composant. L'outil "Redux" fournit un mécanisme de gestion globale des états. Un état peut ainsi être lu par plusieurs composants. C'est un outil très utilisé pour des applications à grande échelle, ou des applications utilisant des composants qui interagissent entre eux. Le code Redux est explicite. Cela le rend simple à comprendre, mais plus long à écrire. C'est pour cela que les développeurs de l'outil proposent en parallèle le "Redux toolkit". Il s'agit d'outils permettant de réduire la taille du code et de l'optimiser. Le message "A non-serializable value was detected in the state" n'est pas lié à l'utilisation de "Redux toolkit" dans votre application, mais à une autre librairie qui l'accompagne souvent.
La librairie "redux-persist" permet de sauvegarder le stockage des états de Redux dans une sauvegarde persistante, comme avec le système de stockage des navigateurs auquel fait appel le langage JavaScript. Si vous souhaitez utiliser ces fonctionnalités, vous devez impérativement utiliser dans votre code des types de données pouvant être sérialisés. C'est le cas de tous les types natifs du langage JavaScript, avec notamment les tableaux et les objets simples. Les classes du modèle que vous créez vous-même ne peuvent pas être utilisées avec ce système, car elles ne sont pas sérialisables. De manière plus générale, il est déconseillé de travailler avec des classes personnalisées quand on travaille avec "React" et "Redux". Si ce message d'erreur apparaît, vous devez donc repenser la logique de votre application pour n'utiliser que les types simples du langage JavaScript.
Si malgré tout, vous souhaitez continuer avec vos classes, il est possible de désactiver le contrôle des valeurs. Gardez cependant à l'esprit que "Redux persist" risque de ne pas fonctionner correctement et que vos données pourraient être mal sauvegardées. Pour désactiver la vérification des valeurs, vous devez faire appel à la fonction "getDefaultMiddlewre".
const customizedMiddleware = getDefaultMiddleware({
serializableCheck: false
})