web-dev-qa-db-fra.com

Utilise REDUX avec NEXT.JS un anti-motif?

Je construis une application NEXT.JS et elle utilise actuellement ReDux. Comme je l'construisant, je me demande si l'utilisation de Redux est vraiment nécessaire et si son utilisation est en réalité un anti-motif. Voici mon raisonnement:

Afin de initialiser correctement le REDUX Store dans Next.js, vous devez créer un composant App personnalisé avec une méthode getInitialProps. En faisant cela, vous désactivez l'optimisation statique automatique que le suivant.js fournit.

En revanche, si je devais inclure ReDux du côté du client, seulement après monté de l'application, le STORE RECHUX se réinitialisera après chaque navigation latérale du serveur. Par exemple, j'ai une application NEXT.JS qui initialise le rechux Store du côté du client, mais lors du routage vers une route dynamique telle que pages/projects/[id], la page est rendue du serveur rendu, et je dois récupérer les informations qui se trouvaient dans le magasin.

Mes questions sont:

  1. Quels sont les avantages d'un magasin Redux dans cette circonstance?
  2. Devrais-je initialiser le magasin dans la racine App composant et renoncez-vous à l'optimisation statique automatique?
  3. Existe-t-il une meilleure façon de faire pour gérer l'état dans Next.js 9.3 avec getStaticProps et le Autres méthodes de récupération de données
  4. Est-ce que je manque quelque chose?
reduxreact-reduxnext.js
29
Jamie S

Si vous avez une application personnalisée avec GetinitialProps, l'optimisation statique automatique que NEXT.JS fournit sera désactivée pour toutes les pages.

Vrai, si vous suivez cette approche.

Y a-t-il une meilleure façon?

Oui, vous pouvez créer un fournisseur REDUX en tant que wrapper et envelopper le composant dont vous avez besoin, le contexte REDUX sera automatiquement initialisé et fourni dans ce composant.

Exemple:

const IndexPage = () => {
  // Implementation
  const dispatch = useDispatch()
  // ...
  // ...
  return <Something />;
}

IndexPage.getInitialProps = ({ reduxStore }) => {
  // Implementation
  const { dispatch } = reduxStore;
  // ...
  // ...
}

export default withRedux(IndexPage)

Vous avez maintenant la possibilité d'utiliser Redux uniquement pour les pages nécessitant une gestion de l'état sans désactiver l'optimisation de l'application entière.

Répondre à vous question " Utilise REDUX avec NEXT.JS un anti-motif ?"

Non, mais il doit être utilisé correctement.

Plus d'informations sur la façon dont se fait ici: https://github.com/zeit/next.js/tree/canary/examples/with-Ruxx

J'espère que ça aide

3
ddon-90