Comment gérer l’état dans Next.js avec Redux Toolkit

Il existe plusieurs façons de gérer l’état dans Next.js. Dans ce guide, nous explorerons comment gérer l’état dans Next.js à l’aide de Redux Toolkit.

La gestion d’état joue un rôle si important dans les applications Web actuelles qu’il est impossible d’exagérer son importance. Il s’agit de la manière dont une application gère et traite les données tout au long de son cycle de vie de développement.

Dans votre application de commerce électronique préférée, lorsque vous vous connectez, ajoutez des articles à votre panier et enfin payez, toutes ces étapes sont gérées à l’aide de la gestion de l’état. Il existe plusieurs façons de gérer l’état dans Next.js, mais dans ce guide, nous nous concentrerons sur l’utilisation Boîte à outils Redux.

Redux est l’un des outils de gestion d’état les plus populaires de l’écosystème React. L’un de ses points forts réside dans sa capacité à gérer une gestion d’état complexe, en particulier dans les grandes applications où la transmission de données peut devenir complexe. Il fournit une solution en créant un magasin qui centralise l’état et permet un flux de données unidirectionnel.

Bien que Redux soit un outil puissant pour la gestion des états, sa configuration et la nécessité d’écrire du code passe-partout répétitif peuvent être complexes et potentiellement avoir un impact sur les performances du code. C’est là qu’intervient Redux Toolkit. Redux Toolkit, également connu sous le nom de RTK, est un ensemble d’utilitaires et de fonctions qui simplifient le travail avec Redux.

Conditions préalables

• Compréhension de base de React
• Familiarité avec Next.js
• UN Base de feu compte

Configurons une application Next.js et installons les dépendances nécessaires. Exécutez la commande suivante dans votre terminal :

npx create-next-app@latest my-nextjs-app

Après cela, accédez au répertoire du projet et installez ces dépendances.

cd my-nextjs-app
npm install @reduxjs/toolkit react-redux firebase

Ici, nous avons installé Redux, Redux Toolkit et Firebase. Nous allons créer une application simple qui permet de savoir si un utilisateur est connecté ou non en utilisant Redux Toolkit et Firebase comme backend.

Initialiser Firebase

Pour initialiser Firebase dans votre projet, créez un fichier nommé firebase.js dans le répertoire racine du projet. Rendez-vous chez vous Console Firebase pour créer un nouveau projet et copier votre code de configuration Firebase dans le firebase.js déposer.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";




const firebaseConfig = {
  apiKey: "<<YOUR-API-KEY>>",
};


const app = initializeApp(firebaseConfig);

Nous avons également importé le produit Firebase que nous utiliserons ; dans notre cas, il s’agit du SDK Firebase pour l’authentification.

Créer un magasin Redux

Un magasin dans Redux est le référentiel central qui contient l’intégralité de l’état de votre application. Il gère l’état et applique un flux de données prévisible dans une application. Un magasin Redux peut être considéré comme une source unique de vérité sur l’état d’une application.

Pour créer une boutique Redux, créez un nouveau dossier dans le répertoire racine de votre application nommé Redux. Dans ce dossier, créez un nouveau fichier store.js et ajoutez-y ce qui suit :

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../slices/authSlice";

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});
export default store;

Dans le code ci-dessus, nous avons configuré un magasin Redux avec un seul réducteur pour gérer l’état d’authentification de l’application. Le configureStore function est un utilitaire créé par Redux Toolkit pour simplifier le processus de création et de configuration d’un magasin Redux.

Un réducteur est une fonction qui spécifie comment l’état de l’application change en réponse aux actions. Dans notre cas, authReducer est le réducteur responsable de la gestion de l’état d’authentification.

Créer une tranche d’authentification

Une tranche du Redux Toolkit est une collection de logique Redux pour une seule fonctionnalité de votre application. Une tranche possède trois éléments importants : les réducteurs, l’état et les actions.

Les réducteurs sont de pures fonctions qui gèrent la façon dont l’état change en réponse à des actions spécifiques, tandis que les actions sont des objets qui représentent les interactions de l’utilisateur.

import { createSlice } from "@reduxjs/toolkit";
const initialState = {
  isLoggedIn: false,
  displayName: null,
};
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    SET_ACTIVE_USER: (state, action) => {
      state.isLoggedIn = true;
      state.displayName = action.payload.displayName;
    },
    REMOVE_ACTIVE_USER: (state, action) => {
      state.isLoggedIn = false;
      state.displayName = null;
    },
  },
});
export const { SET_ACTIVE_USER, REMOVE_ACTIVE_USER } = authSlice.actions;
export default authSlice.reducer;

Le code ci-dessus définit la tranche Redux pour l’authentification. Il utilise le createSlice fonction pour simplifier le processus de création de tranches Redux. Le createSlice la fonction est appelée avec un objet qui contient le nom de la tranche (auth), état initial (initialState) et un ensemble de fonctions de réduction (SET_ACTIVE_USER et REMOVE_ACTIVE_USER).

Les fonctions de réduction définissent comment l’état doit être mis à jour en réponse aux actions distribuées.

Configurer un fournisseur personnalisé

Dans Redux, un composant Provider enveloppe l’intégralité de votre application pour rendre le magasin Redux accessible à tous les composants. Pour créer un fournisseur personnalisé, dans votre Redux dossier, créez un fichier nommé ReduxProvider.js et ajoutez-y ce qui suit :

"use client";
import React from "react";
import { Provider } from "react-redux";
import store from "./store";

function ReduxProvider({ children }) {
  return <Provider store={store}>{children}</Provider>;
}
export default ReduxProvider;

Ici, vous remarquerez que nous avons créé un fournisseur personnalisé au lieu de l’envelopper directement dans notre application racine, layout.js. En effet, nous avons besoin que ce composant soit rendu côté client.

Mettez à jour votre application racine avec le fournisseur personnalisé

Enfin, nous devons mettre à jour notre racine app avec le fournisseur personnalisé. Contrairement aux applications React classiques, Next.js 14 n’a pas de app.js ou index.js fichier, donc le point d’entrée dans les applications Next.js est le layout.js déposer.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ReduxProvider from "../Redux/ReduxProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {}
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

Dans ce fichier, nous avons importé le fournisseur personnalisé que nous venons de créer :ReduxProvider-et enroulez-le autour du children dans le layout.js déposer. Cela le rend accessible aux autres composants de l’application.

Créer un composant pour gérer l’authentification des utilisateurs

Maintenant que nous avons fini de configurer Redux Toolkit dans notre code, nous devons tester sa fonctionnalité dans notre composant.

Tout d’abord, rendez-vous sur votre console Firebase et activez le fournisseur Google.

Créez un dossier nommé components dans votre app annuaire. Créez ensuite un fichier dans votre components dossier nommé Auth.jsajoutez-y le code suivant :

"use client";

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { auth } from "../../firebase";
import { signInWithPopup, GoogleAuthProvider, signOut } from "firebase/auth";
import { SET_ACTIVE_USER, REMOVE_ACTIVE_USER } from "@/Redux/authSlice";

const Auth = () => {
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
  const displayName = useSelector((state) => state.auth.displayName);
  const signInWithGoogle = async () => {
    setLoading(true);
    const provider = new GoogleAuthProvider();
    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;
      dispatch(SET_ACTIVE_USER({ displayName: user.displayName }));
    } catch (error) {
      console.error("Error signing in with Google", error);
    } finally {
      setLoading(false);
    }
  };
  const signOutUser = async () => {
    setLoading(true);
    try {
      await signOut(auth);
      dispatch(REMOVE_ACTIVE_USER());
    } catch (error) {
      console.error("Error signing out", error);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : isLoggedIn ? (
        <div>
          <p>Welcome, {displayName}!</p>
          <button className="text-center mt-8" onClick={signOutUser}>
            Sign Out
          </button>
        </div>
      ) : (
        <button onClick={signInWithGoogle}>Sign In with Google</button>
      )}
    </div>
  );
};

export default Auth;

Dans le code ci-dessus, nous avons utilisé Firebase Google auth et Redux pour savoir si un utilisateur est connecté ou non. Lorsque l’utilisateur est connecté, il affiche son nom.

Nous avons également utilisé le useDispatch hook pour envoyer des actions à notre boutique Redux. C’est la seule façon dont nous pouvons mettre à jour le magasin au sein de nos composants. Il fournit un moyen de répartir les actions des composants sans avoir besoin de passer le dispatch fonctionner grâce à plusieurs accessoires.

Le SET_ACTIVE_USER définit l’état pour indiquer qu’un utilisateur est connecté et met à jour le nom d’affichage en fonction de la charge utile fournie, tandis que le REMOVE_ACTIVE_USER définit l’état pour indiquer qu’aucun utilisateur n’est actuellement connecté, réinitialisant le nom d’affichage à null.

Le useSelector est un crochet qui prend un selector fonctionner comme un argument. Le selector La fonction est utilisée pour extraire une donnée spécifique du magasin Redux. Dans notre cas, il extrait isLoggedIn et displayName propriétés de la auth tranche du magasin Redux.

Enfin, nous devons importer notre Auth.js déposer dans le page.tsx fichier, qui est le composant principal de notre application.

import Image from "next/image";
import Auth from "./components/Auth";
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Auth />
    </main>
  );
}

Si vous avez suivi avec succès jusqu’à présent, vous devriez pouvoir vous connecter avec Google.

Redux Toolkit est un outil de gestion d’état pour les applications complexes. Cependant, comme tout autre outil, il présente des inconvénients.

Projets à petite échelle

Si vous créez une application à petite échelle avec une simple exigence de gestion d’état et n’implique pas d’interactions d’état complexes, l’introduction de Redux Toolkit peut s’avérer excessive. Next.js fournit un système de gestion d’état intégré suffisant pour les petites applications.

Données facilement disponibles sur les pages

Si les données dont vos composants ont besoin sont facilement accessibles via les mécanismes de récupération de données de Next.js dans les composants serveur, leur gestion globale dans Redux peut s’avérer inutile.

Conclusion

Dans cet article, nous avons exploré le Redux Toolkit, appris à l’utiliser pour gérer l’état dans Next.js et implémenté l’authentification Firebase Google.