Comment puis-je conserver l'état dans le stockage local Réagissez sans Redux?

Question

Je construis une application web dans React connectée à Firebase, qui authentifie les utilisateurs et stocke les données postales. Il semble y avoir beaucoup de documentation en ligne sur l'utilisation de Redux, mais pas beaucoup sur l'état persistant sans cela. Lorsqu'un utilisateur actualise une page, l'état de <App /> est réinitialisé. Je dois donc conserver l'état existant/le récupérer dans Firebase. Certains articles suggèrent d'utiliser le stockage local pour stocker l'état. Mais avec les meilleures pratiques à l'esprit, que devrait être stocké dans le stockage local? Mon application stocke tout son état dans <App /> et passe l'état nécessaire comme accessoires aux composants pertinents.

Les deux exemples suivants supposent qu'un utilisateur s'est déjà authentifié et qu'il vient d'actualiser sa page. Nous voulons que leur session soit préservée, nous aussi:

Exemple # 1:

• charges App et contrôle le stockage local pour un objet du dernier de chaîne de caractères état local stocké. Définit l'état sur cet état ou vide.
• Si 'state' est récupéré et défini, utilisez this.state['uid'] pour synchroniser l'état avec Firebase (récupération), puis mettez à nouveau à jour l'état de stockage local.
• Chaque fois qu'un utilisateur met à jour quelque chose, mettez à jour l'état (qui met à jour Firebase) et mettez également à jour l'état de stockage local.
• Lorsque l'utilisateur se déconnecte, effacez l'élément de stockage local 'state'.

Exemple 2:

• charges appli et des vérifications de stockage local pour un fluide (qui est réglée lors de l'authentification), si l'on se trouve, l'utilise pour la synchronisation avec l'état firebase (fetch).
• Si un utilisateur recharge une page, les données sont récupérées à partir de Firebase.
• Lorsque l'utilisateur se déconnecte, effacez l'élément de stockage local 'uid'.

Avec le premier exemple, je conserve effectivement deux copies de l'état. Un dans State de React, et un autre dans le stockage local du navigateur. Au cas où l'utilisateur ferme la fenêtre ou actualise la page.

Ma question est la suivante: Quelle est la meilleure pratique? Ou, est la construction d'une application React qui doit persister utilisateur et état à travers différents itinéraires sans Redux totalement bonkers?

Apprentissage React est assez d'une courbe sans Redux, donc j'essaie de voir si je peux me débrouiller sans elle.

Answer 1

Dans votre cas d'utilisation, redux ne va pas vous aider car l'état de redux se réinitialise également lorsque l'utilisateur actualise la page. Si vous souhaitez conserver l'état de votre application lors de la régénération/de la fermeture du navigateur, vous devez utiliser localStorage/sessionStorage/cookies, etc.

Quelle est la meilleure solution?

Eh bien, je dirais que la deuxième approche est meilleure.J'éviterais de conserver la copie d'état dans localstorage. Je garderais seulement une sorte de jeton/id (dans votre cas uid) qui identifient l'utilisateur de manière unique et iraient chercher de nouvelles données à chaque fois. Lorsque votre application se développe, il peut être difficile de gérer ces états dans localstorage.