Créer une application Web avec React, Redux et Sanity.io

À propos de l'auteur

Ifeanyi Dike est un développeur full-stack à Abuja, au Nigeria. Il est le chef d'équipe de Sterling Digitals Limited, mais il est également ouvert à plus d'opportunités et…
En savoir plus sur
Ifeanyi
↬

Dans cet article, nous allons créer une application de liste simple avec Sanity.io et React. Nos états globaux seront gérés avec Redux et l'application sera stylée avec des composants stylisés.

L'évolution rapide des plates-formes numériques a placé de sérieuses limitations sur les CMS traditionnels comme WordPress. Ces plates-formes sont couplées, inflexibles et se concentrent sur le projet plutôt que sur le produit. Heureusement, plusieurs CMS sans tête ont été développés pour relever ces défis et bien d'autres.

Contrairement aux CMS traditionnels, les CMS sans tête, qui peuvent être décrits comme des logiciels en tant que service (SaaS), peuvent être utilisés pour développer des sites Web, des applications mobiles, des applications numériques écrans, et bien d'autres. Ils peuvent être utilisés sur des plates-formes illimitées. Si vous recherchez un CMS indépendant de la plate-forme, destiné aux développeurs et offrant une prise en charge multiplateforme, vous n’avez pas besoin de chercher plus loin que le CMS sans tête. La tête fait ici référence au frontend ou à la couche de présentation tandis que le corps fait référence au backend ou au référentiel de contenu. Cela offre de nombreux avantages intéressants. Par exemple, il permet au développeur de choisir n'importe quelle interface de son choix et vous pouvez également concevoir le calque de présentation comme vous le souhaitez.

Il existe de nombreux CMS sans tête, parmi les plus populaires, Strapi, Contentful, Contentstack , Sanity, Butter CMS, Prismic, Storyblok, Directus, etc. Ces CMS headless sont basés sur des API et ont leurs points forts individuels. Par exemple, les CMS comme Sanity, Strapi, Contentful et Storyblok sont gratuits pour les petits projets.

Ces CMS sans tête sont également basés sur différentes piles technologiques. Alors que Sanity.io est basé sur React.js, Storyblok est basé sur Vue.js. En tant que développeur React, c'est la principale raison pour laquelle je me suis rapidement intéressé à Sanity. Cependant, étant un CMS headless, chacune de ces plates-formes peut être branchée sur n'importe quel frontend, qu'il soit Angular, Vue ou React.

Chacun de ces CMS headless a à la fois des plans gratuits et payants qui représentent un saut de prix significatif. Bien que ces plans payants offrent plus de fonctionnalités, vous ne voudriez pas payer autant pour un projet de petite à moyenne taille. Sanity tente de résoudre ce problème en introduisant des options de paiement à l'utilisation. Avec ces options, vous serez en mesure de payer pour ce que vous utilisez et d'éviter le saut de prix.

Une autre raison pour laquelle j'ai choisi Sanity.io est leur langage GROQ. Pour moi, Sanity se démarque de la foule en proposant cet outil. Les requêtes d'objets graphiques-relationnels (GROQ) réduisent le temps de développement, vous aident à obtenir le contenu dont vous avez besoin sous la forme dont vous avez besoin et aident également le développeur à créer un document avec un nouveau modèle de contenu sans changement de code.

De plus, les développeurs ne sont pas limités au langage GROQ. Vous pouvez également utiliser GraphQL ou même les traditionnels axios et fetch dans votre application React pour interroger le backend. Comme la plupart des autres CMS sans tête, Sanity dispose d'une documentation complète qui contient des conseils utiles pour construire sur la plate-forme.

Remarque: Cet article nécessite une compréhension de base de React, Redux et CSS.

Premiers pas avec Sanity.io

Pour utiliser Sanity sur votre machine, vous devrez installer l'outil CLI Sanity. Bien que cela puisse être installé localement sur votre projet, il est préférable de l'installer globalement pour le rendre accessible à toutes les applications futures.

Pour ce faire, entrez les commandes suivantes dans votre terminal.

 npm install -g @sanity / cli 

L'indicateur -g de la commande ci-dessus permet une installation globale.

Ensuite, nous devons initialiser Sanity dans notre application. Bien que cela puisse être installé en tant que projet séparé, il est généralement préférable de l'installer dans votre application frontend (dans ce cas React).

Dans son ​​blog Kapehe a expliqué en détail comment intégrer Sanity avec Réagir. Il sera utile de parcourir l'article avant de poursuivre ce didacticiel.

Entrez les commandes suivantes pour initialiser Sanity dans votre application React.

 sanity init 

La commande sanity devient disponible pour nous lorsque nous avons installé l'outil CLI Sanity. Vous pouvez afficher une liste des commandes Sanity disponibles en tapant sanity ou sanity help dans votre terminal.

Lors de la configuration ou de l'initialisation de votre projet, vous devrez suivre le invite à le personnaliser. Vous devrez également créer un ensemble de données et vous pourrez même choisir leur ensemble de données personnalisé rempli de données. Pour cette application de liste, nous utiliserons l'ensemble de données de films de science-fiction personnalisé de Sanity. Cela nous évitera de saisir les données nous-mêmes.

Pour afficher et modifier votre jeu de données, cd dans le sous-répertoire Sanity de votre terminal et saisissez sanity start . Cela fonctionne généralement sur http: // localhost: 3333 / . Vous devrez peut-être vous connecter pour accéder à l'interface (assurez-vous de vous connecter avec le même compte que vous avez utilisé lors de l'initialisation du projet). Une capture d'écran de l'environnement est présentée ci-dessous.

Communication bidirectionnelle Sanity-React

Sanity et React doivent communiquer entre eux pour une application entièrement fonctionnelle.

CORS Origins Setting in Sanity Manager

Nous allons d'abord connecter notre application React à Sanity. Pour ce faire, connectez-vous à https://manage.sanity.io/ et localisez CORS origins sous API Settings dans les Settings languette. Ici, vous devrez relier l'origine de votre frontend au backend Sanity. Notre application React fonctionne sur http: // localhost: 3000 / par défaut, nous devons donc l'ajouter au CORS.

Ceci est illustré dans la figure ci-dessous.

Grand aperçu )

Connecter Sanity To React

Sanity associe un ID de projet à chaque projet que vous créez. Cet ID est nécessaire lors de la connexion à votre application frontale. Vous pouvez trouver l'ID du projet dans votre Sanity Manager.

Le backend communique avec React en utilisant une bibliothèque connue sous le nom de sanity client . Vous devez installer cette bibliothèque dans votre projet Sanity en entrant les commandes suivantes.

 npm install @ sanity / client 

Créez un fichier sanitySetup.js (le nom de fichier n'a pas d'importance), dans votre project src et entrez les codes React suivants pour établir une connexion entre Sanity et React.

 import sanityClient depuis "@ sanity / client"
exporter par défaut sanityClient ({
    projectId: PROJECT_ID,
    ensemble de données: DATASET_NAME,
    useCdn: vrai
}); 

Nous avons transmis notre projectId nom de l'ensemble de données et un booléen useCdn à l'instance du client sanity importé de @ sanity / client . Cela fonctionne par magie et connecte notre application au backend.

Maintenant que nous avons terminé la connexion bidirectionnelle, passons directement à la construction de notre projet.

Configurer et connecter Redux à notre application

Nous aurons besoin de quelques dépendances pour travailler avec Redux dans notre application React. Ouvrez votre terminal dans votre environnement React et entrez les commandes bash suivantes.

 npm install redux react-redux redux-thunk

Redux est une bibliothèque globale de gestion d'état qui peut être utilisée avec la plupart des frameworks et bibliothèques frontend tels que React. Cependant, nous avons besoin d'un outil intermédiaire react-redux pour permettre la communication entre notre magasin Redux et notre application React. Redux thunk nous aidera à renvoyer une fonction au lieu d'un objet action de Redux.

Bien que nous puissions écrire tout le workflow Redux dans un seul fichier, il est souvent plus simple et préférable de séparer nos préoccupations. Pour cela, nous allons diviser notre workflow en trois fichiers à savoir, actions reducers puis le store . Cependant, nous avons également besoin d'un fichier séparé pour stocker les types d'action également appelés constantes .

Configurer le magasin

Le magasin est le fichier le plus important de Redux . Il organise et conditionne les états et les expédie à notre application React.

Voici la configuration initiale de notre magasin Redux nécessaire pour connecter notre workflow Redux.

 import {createStore, applyMiddleware} de "redux";
importer le thunk de "redux-thunk";
importer des réducteurs de "./reducers/";

exporter par défaut createStore (
  réducteurs,
  applyMiddleware (thunk)
);

La fonction createStore de ce fichier prend trois paramètres: le reducer (obligatoire), l'état initial et le enhancer (généralement un middleware, dans ce cas, thunk fourni via applyMiddleware ). Nos réducteurs seront stockés dans un dossier réducteurs et nous les combinerons et les exporterons dans un fichier index.js dans le dossier reducers . C'est le fichier que nous avons importé dans le code ci-dessus. Nous reviendrons sur ce fichier plus tard.

Introduction au langage GROQ de Sanity

Sanity va encore plus loin dans l'interrogation des données JSON en présentant GROQ. GROQ est l'acronyme de Graph-Relational Object Queries. Selon Sanity.io GROQ est un langage de requête déclaratif conçu pour interroger des collections de documents JSON en grande partie sans schéma.

Sanity fournit même le GROQ Playground pour aider les développeurs à se familiariser avec la langue. Cependant, pour accéder au terrain de jeu, vous devez installer sanity vision .
Exécutez sanity install @ sanity / vision sur votre terminal pour l'installer.

GROQ a une syntaxe similaire à GraphQL mais elle est plus condensée et plus facile à lire. De plus, contrairement à GraphQL, GROQ peut être utilisé pour interroger des données JSON.

Par exemple, pour récupérer chaque élément de notre film, nous utiliserons la syntaxe GROQ suivante.

 * [_type == "movie"] 

Cependant, si nous souhaitons récupérer uniquement les _ids et crewMembers dans notre document vidéo. Nous devons spécifier ces champs comme suit.

 `* [_type == 'movie'] {
    _id,
    membres d'équipage
}

Ici, nous avons utilisé * pour dire à GROQ que nous voulons chaque document du film _type . _type est un attribut de la collection de films. Nous pouvons également renvoyer le type comme nous l'avons fait pour _id et crewMembers comme suit:

 * [_type == 'movie'] {
    _id,
    _type,
    membres d'équipage
}

Nous travaillerons davantage sur GROQ en l'implémentant dans nos actions Redux, mais vous pouvez consulter la documentation de Sanity.io pour GROQ pour en savoir plus. Le Aide-mémoire de requête GROQ fournit de nombreux exemples pour vous aider à maîtriser le langage de requête.

Configuration des constantes

Nous avons besoin de constantes pour suivre les types d'action à chaque étape du flux de travail Redux. Les constantes aident à déterminer le type d'action distribuée à chaque instant. Par exemple, nous pouvons suivre quand l'API est en cours de chargement, complètement chargée et lorsqu'une erreur se produit.

Nous n'avons pas nécessairement besoin de définir des constantes dans un fichier séparé mais pour plus de simplicité et de clarté, c'est généralement la meilleure pratique dans Redux

Par convention, les constantes en Javascript sont définies avec des majuscules. Nous suivrons ici les bonnes pratiques pour définir nos constantes. Voici un exemple de constante pour indiquer les demandes de récupération de films en mouvement.

 export const MOVIE_FETCH_REQUEST = "MOVIE_FETCH_REQUEST"; 

Ici, nous avons créé une constante MOVIE_FETCH_REQUEST qui indique un type d'action de ] MOVIE_FETCH_REQUEST . Cela nous aide à appeler facilement ce type d'action sans utiliser les chaînes et à éviter les bogues. Nous avons également exporté la constante pour qu'elle soit disponible n'importe où dans notre projet.

De même, nous pouvons créer d'autres constantes pour récupérer les types d'action indiquant quand la requête réussit ou échoue. Un code complet pour le movieConstants.js est donné dans le code ci-dessous.

Ici, nous avons défini plusieurs constantes pour récupérer un film ou une liste de films, trier et récupérer les films les plus populaires. Notez que nous définissons des constantes pour déterminer quand la requête est en cours de chargement réussie et a échoué .

De même, notre personConstants.js le fichier est donné ci-dessous:

 export const PERSONS_FETCH_REQUEST = "PERSONS_FETCH_REQUEST";
export const PERSONS_FETCH_SUCCESS = "PERSONS_FETCH_SUCCESS";
export const PERSONS_FETCH_FAIL = "PERSONS_FETCH_FAIL";

export const PERSON_FETCH_REQUEST = "PERSON_FETCH_REQUEST";
export const PERSON_FETCH_SUCCESS = "PERSON_FETCH_SUCCESS";
export const PERSON_FETCH_FAIL = "PERSON_FETCH_FAIL";

export const PERSONS_COUNT = "PERSONS_COUNT"; 

Comme le movieConstants.js nous définissons une liste de constantes pour récupérer une ou plusieurs personnes. Nous définissons également une constante pour compter les personnes. Les constantes suivent la convention décrite pour movieConstants.js et nous les avons également exportées pour être accessibles à d'autres parties de notre application.

Enfin, nous implémenterons le mode clair et sombre dans l'application et nous avoir un autre fichier de constantes globalConstants.js . Jetons un coup d'œil.

 export const SET_LIGHT_THEME = "SET_LIGHT_THEME";
export const SET_DARK_THEME = "SET_DARK_THEME"; 

Ici, nous définissons des constantes pour déterminer quand le mode clair ou sombre est distribué. SET_LIGHT_THEME détermine quand l'utilisateur passe au thème clair et SET_DARK_THEME détermine quand le thème sombre est sélectionné. Nous avons également exporté nos constantes comme indiqué.

Configuration des actions

Par convention, nos actions sont stockées dans un dossier séparé. Les actions sont regroupées selon leurs types. Par exemple, nos actions de film sont stockées dans movieActions.js tandis que nos actions de personne sont stockées dans le fichier personActions.js .

Nous avons également globalActions.js ] pour prendre soin de faire basculer le thème du mode clair au mode sombre.

Allons chercher tous les films dans moviesActions.js .

 import sanityAPI de "../../sanitySetup";
importer {
  MOVIES_FETCH_FAIL,
  MOVIES_FETCH_REQUEST,
  MOVIES_FETCH_SUCCESS
} de "../constants/movieConstants";

const fetchAllMovies = () => async (répartition) => {
  essayez {
    envoi({
      type: MOVIES_FETCH_REQUEST
    });
    const data = attendre sanityAPI.fetch (
      `* [_type == 'movie'] {
          _id,
          "affiche": poster.asset-> url,
      } `
    );
    envoi({
      tapez: MOVIES_FETCH_SUCCESS,
      charge utile: données
    });
  } catch (erreur) {
    envoi({
      tapez: MOVIES_FETCH_FAIL,
      charge utile: error.message
    });
  }
}; 

Vous vous souvenez quand nous avons créé le fichier sanitySetup.js pour connecter React à notre backend Sanity? Ici, nous avons importé la configuration pour nous permettre d'interroger notre backend de santé mentale à l'aide de GROQ. Nous avons également importé quelques constantes exportées du fichier movieConstants.js dans le dossier constants .

Ensuite, nous avons créé la fonction d'action fetchAllMovies pour récupérer chaque film dans notre collection. La plupart des applications React traditionnelles utilisent axios ou fetch pour récupérer les données du backend. Mais bien que nous puissions utiliser n'importe lequel de ces éléments ici, nous utilisons le GROQ de Sanity. Pour entrer dans le mode GROQ nous devons appeler la fonction sanityAPI.fetch () comme indiqué dans le code ci-dessus. Ici, sanityAPI est la connexion React-Sanity que nous avons établie précédemment. Cela renvoie une Promise et doit donc être appelée de manière asynchrone. Nous avons utilisé la syntaxe async-await ici, mais nous pouvons également utiliser la syntaxe .then .

Puisque nous utilisons thunk dans notre application , nous pouvons renvoyer une fonction au lieu d'un objet action. Cependant, nous avons choisi de transmettre l'instruction return en une seule ligne.

 const fetchAllMovies = () => async (dispatch) => {
  ...
} 

Notez que nous pouvons également écrire la fonction de cette façon:

 const fetchAllMovies = () => {
  return async (dispatch) => {
    ...
  }
} 

En général, pour récupérer tous les films, nous avons d'abord distribué un type d'action qui suit le chargement de la requête. Nous avons ensuite utilisé la syntaxe GROQ de Sanity pour interroger de manière asynchrone le document du film. Nous avons récupéré le _id et l'URL de l'affiche des données du film. Nous avons ensuite renvoyé une charge utile contenant les données obtenues à partir de l'API.

De même, nous pouvons récupérer les films par leur _id, trier les films et obtenir les films les plus populaires.

Nous pouvons également récupérer les films qui correspondent à la référence d'une personne en particulier . Nous l'avons fait dans la fonction fetchMoviesByRef .

 const fetchMoviesByRef = (ref) => async (dispatch) => {
  essayez {
    envoi({
      type: MOVIES_REF_FETCH_REQUEST
    });
    const data = attendre sanityAPI.fetch (
      `* [_type == 'movie' 
            && (castMembers[person._ref match '${ref}'] ||
                membres d'équipage [person._ref match '${ref}'])
            ] {
                _id,
                "poster": poster.asset-> url,
                Titre
            } `
    );
    envoi({
      tapez: MOVIES_REF_FETCH_SUCCESS,
      charge utile: données
    });
  } catch (erreur) {
    envoi({
      tapez: MOVIES_REF_FETCH_FAIL,
      charge utile: error.message
    });
  }
}; 

Cette fonction prend un argument et vérifie si person._ref dans castMembers ou crewMembers correspond à l'argument passé. Nous retournons le film _id l'url de l'affiche et le titre à côté. Nous envoyons également une action de type MOVIES_REF_FETCH_SUCCESS en joignant une charge utile des données renvoyées, et si une erreur se produit, nous envoyons une action de type MOVIE_REF_FETCH_FAIL en joignant une charge utile du message d'erreur , grâce au wrapper try-catch .

Dans la fonction fetchMovieById nous avons utilisé GROQ pour récupérer un film qui correspond à un identifiant particulier passé à la fonction.

La syntaxe GROQ de la fonction est indiquée ci-dessous.

 const data = await sanityAPI.fetch (
      `* [_type == 'movie' && _id == '${id}'] {
                _id,
                "cast":
                    castMembers [] {
                        "ref": person._ref,
                        le nom du personnage,
                        "nom": personne-> nom,
                        "image": personne-> image.asset-> url
                    }
                ,
                "équipage" :
                    crewMembers [] {
                        "ref": person._ref,
                        département,
                        emploi,
                        "nom": personne-> nom,
                        "image": personne-> image.asset-> url
                    }
                ,
                "Aperçu":   {
                    "text": vue d'ensemble [0] .children [0] .text
                  },
                popularité,
                "affiche": poster.asset-> url,
                date de sortie,
                Titre
            } [0] `
    ); 

Comme l'action fetchAllMovies nous avons commencé par sélectionner tous les documents de type movie mais nous sommes allés plus loin en ne sélectionnant que ceux avec un identifiant fourni à la fonction. Puisque nous avons l'intention d'afficher beaucoup de détails pour le film, nous avons spécifié un tas d'attributs à récupérer.

Nous avons récupéré le film id et aussi quelques attributs dans le castMembers tableau à savoir ref characterName le nom de la personne et l'image de la personne. Nous avons également changé l'alias de castMembers à cast .

Comme pour castMembers nous avons sélectionné quelques attributs du tableau crewMembers , à savoir réf département job le nom et l'image de la personne. nous avons également changé l'alias de crewMembers à crew .

De la même manière, nous avons sélectionné le texte général, la popularité, l'URL de l'affiche du film, la date de sortie et le titre du film.

] Le langage GROQ de Sanity nous permet également de trier un document. Pour trier un élément, nous passons l'ordre à côté d'un opérateur pipe .

Par exemple, si nous souhaitons trier les films par leur date de sortie dans l'ordre croissant , nous pourrions faire ce qui suit.

 const data = await sanityAPI.fetch (
      `* [_type == 'movie'] {
          ...
      } | ordre (releaseDate, asc) `
    );

Nous avons utilisé cette notion dans la fonction sortMoviesBy pour trier par ordre croissant ou décroissant.

Examinons cette fonction ci-dessous.

 const sortMoviesBy = (item, type) = > async (répartition) => {
  essayez {
    envoi({
      type: MOVIES_SORT_REQUEST
    });
    const data = attendre sanityAPI.fetch (
      `* [_type == 'movie'] {
                _id,
                "affiche": poster.asset-> url,
                Titre
                } | commande ($ {item} $ {type}) `
    );
    envoi({
      tapez: MOVIES_SORT_SUCCESS,
      charge utile: données
    });
  } catch (erreur) {
    envoi({
      tapez: MOVIES_SORT_FAIL,
      charge utile: error.message
    });
  }
}; 

Nous avons commencé par envoyer une action de type MOVIES_SORT_REQUEST pour déterminer quand la requête est en cours de chargement. Nous avons ensuite utilisé la syntaxe GROQ pour trier et récupérer les données de la collection movie . L'élément à trier est fourni dans la variable item et le mode de tri (croissant ou décroissant) est fourni dans la variable type . Par conséquent, nous avons renvoyé l ' id l'URL de l'affiche et le titre. Une fois les données renvoyées, nous envoyons une action de type MOVIES_SORT_SUCCESS et en cas d'échec, nous envoyons une action de type MOVIES_SORT_FAIL .

A similaire GROQ Le concept s'applique à la fonction getMostPopular . La syntaxe GROQ est illustrée ci-dessous.

 const data = await sanityAPI.fetch (
      »
            * [_type == 'movie'] {
                _id,
                "Aperçu":   {
                    "text": vue d'ensemble [0] .children [0] .text
                },
                "affiche": poster.asset-> url,
                Titre
            } | ordre (popularité desc) [0..2] `
    ); 

La seule différence ici est que nous avons trié les films par popularité par ordre décroissant, puis sélectionné uniquement les trois premiers. Les éléments sont retournés dans un index de base zéro et donc les trois premiers éléments sont les éléments 0, 1 et 2. Si nous souhaitons récupérer les dix premiers éléments, nous pourrions passer [0..9] à la fonction.

Voici la version complète code pour les actions de film dans le fichier movieActions.js .

Configuration des réducteurs

Les réducteurs sont l'un des concepts les plus importants de Redux. Ils prennent l'état précédent et déterminent les changements d'état.

En général, nous utiliserons l'instruction switch pour exécuter une condition pour chaque type d'action. Par exemple, nous pouvons renvoyer loading lorsque le type d'action dénote un chargement, puis la charge utile lorsqu'il dénote un succès ou une erreur. On s'attend à ce qu'il prenne comme arguments l'état initial et l'action .

Notre fichier movieReducers.js contient divers réducteurs pour correspondre aux actions définies dans le fichier movieActions.js . Cependant, chacun des réducteurs a une syntaxe et une structure similaires. Les seules différences sont les constantes qu'elles appellent et les valeurs qu'elles renvoient.

Commençons par examiner le fetchAllMoviesReducer dans le fichier movieReducers.js .

 import {
  MOVIES_FETCH_FAIL,
  MOVIES_FETCH_REQUEST,
  MOVIES_FETCH_SUCCESS,
} de "../constants/movieConstants";

const fetchAllMoviesReducer = (état = {}, action) => {
  commutateur (action.type) {
    case MOVIES_FETCH_REQUEST:
      revenir {
        chargement: vrai
      };
    case MOVIES_FETCH_SUCCESS:
      revenir {
        chargement: faux,
        films: action.payload
      };
    case MOVIES_FETCH_FAIL:
      revenir {
        chargement: faux,
        erreur: action.payload
      };
    case MOVIES_FETCH_RESET:
      revenir {};
    défaut:
      état de retour;
  }
}; 

Comme tous les réducteurs, le fetchAllMoviesReducer prend comme arguments l'objet d'état initial ( état ) et l'objet d'action . Nous avons utilisé l'instruction switch pour vérifier les types d'actions à chaque instant. S'il correspond à MOVIES_FETCH_REQUEST nous renvoyons le chargement comme vrai pour nous permettre de montrer un indicateur de chargement à l'utilisateur.

S'il correspond à MOVIES_FETCH_SUCCESS nous désactivons l'indicateur de chargement puis renvoyez la charge utile d'action dans une variable movies . Mais s'il s'agit de MOVIES_FETCH_FAIL nous désactivons également le chargement puis renvoyons l'erreur. Nous voulons également la possibilité de réinitialiser nos films. Cela nous permettra d'effacer les états lorsque nous en aurons besoin.

Nous avons la même structure pour les autres réducteurs. Le movieReducers.js complet est montré ci-dessous.

Nous avons également suivi exactement la même structure pour personReducers.js . Par exemple, la fonction fetchAllPersonsReducer définit les états pour récupérer toutes les personnes dans la base de données.

Ceci est donné dans le code ci-dessous.

 import {
  PERSONS_FETCH_FAIL,
  PERSONS_FETCH_REQUEST,
  PERSONS_FETCH_SUCCESS,
} de "../constants/personConstants";

const fetchAllPersonsReducer = (état = {}, action) => {
  commutateur (action.type) {
    case PERSONS_FETCH_REQUEST:
      revenir {
        chargement: vrai
      };
    case PERSONS_FETCH_SUCCESS:
      revenir {
        chargement: faux,
        personnes: action.payload
      };
    case PERSONS_FETCH_FAIL:
      revenir {
        chargement: faux,
        erreur: action.payload
      };
    défaut:
      état de retour;
  }
};

Tout comme le fetchAllMoviesReducer nous avons défini fetchAllPersonsReducer avec state et action comme arguments. Ce sont des configurations standard pour les réducteurs Redux. Nous avons ensuite utilisé l'instruction switch pour vérifier les types d'action et si elle est de type PERSONS_FETCH_REQUEST nous renvoyons le chargement comme vrai. S'il s'agit de PERSONS_FETCH_SUCCESS nous désactivons le chargement et renvoyons la charge utile, et s'il s'agit de PERSONS_FETCH_FAIL nous renvoyons l'erreur.

Combining Reducer

Redux's moissonneuse-réducteurs ] nous permet de combiner plus d'un réducteur et de le transmettre au magasin. Nous allons combiner nos films et nos réducteurs de personnes dans un fichier index.js dans le dossier reducers .

Jetons un œil.

 import {combineReducers} de "redux";
importer {
  fetchAllMoviesReducer,
  fetchMovieByIdReducer,
  sortMoviesByReducer,
  getMostPopularReducer,
  fetchMoviesByRefReducer
} de "./movieReducers";

importer {
  fetchAllPersonsReducer,
  fetchPersonByIdReducer,
  countPersonsReducer
} de "./personReducers";

import {toggleTheme} de "./globalReducers";

exporter par défaut combineReducers ({
  fetchAllMoviesReducer,
  fetchMovieByIdReducer,
  fetchAllPersonsReducer,
  fetchPersonByIdReducer,
  sortMoviesByReducer,
  getMostPopularReducer,
  countPersonsReducer,
  fetchMoviesByRefReducer,
  toggleThème
}); 

Ici, nous avons importé tous les réducteurs du fichier des films, des personnes et des réducteurs globaux et les avons passés à la fonction combineReducers . La fonction combineReducers prend un objet qui nous permet de passer tous nos réducteurs. Nous pouvons même ajouter un alias aux arguments dans le processus.

Nous travaillerons sur les globalReducers plus tard.

Nous pouvons maintenant passer les réducteurs dans le Redux store.js dossier. Ceci est illustré ci-dessous:

 import {createStore, applyMiddleware} de "redux";
importer le thunk de "redux-thunk";
importer des réducteurs depuis "./reducers/index";

export par défaut createStore (réducteurs, initialState, applyMiddleware (thunk));

Après avoir configuré notre flux de travail Redux, configurons notre application react.

Configuration de notre application React

Notre application react répertorie les films et les acteurs et membres d'équipage correspondants. Nous utiliserons react-router-dom pour le routage et styled-components pour styliser l'application. Nous utiliserons également l'interface utilisateur matérielle pour les icônes et certains composants de l'interface utilisateur.

Entrez la commande bash suivante pour installer les dépendances.

 npm install react-router-dom @ material-ui / core @ material-ui / icons query-string 

Voici ce que nous allons construire.

Connexion de Redux à notre application React

React-redux est livré avec un fournisseur fonction qui nous permet de connecter notre application au magasin Redux. Pour ce faire, nous devons transmettre une instance du magasin au fournisseur. Nous pouvons le faire soit dans notre fichier index.js ou App.js .

Voici notre fichier index.js.

 import React de "react";
importer ReactDOM depuis "react-dom";
import "./index.css";
importer l'application depuis "./App";
import {Provider} de "react-redux";
importer le magasin depuis "./redux/store";
ReactDOM.render (
  
    
  ,
  document.getElementById ("racine")
); 

Ici, nous avons importé Provider de react-redux et store de notre boutique Redux. Ensuite, nous avons enveloppé toute notre arborescence de composants avec le fournisseur, en lui passant le magasin.

Ensuite, nous avons besoin de react-router-dom pour le routage dans notre application React. react-router-dom est livré avec BrowserRouter Switch et Route qui peuvent être utilisés pour définir notre chemin et nos routes.

Nous faisons cela dans notre fichier App.js . Ceci est montré ci-dessous:

 import React de "react";
importer l'en-tête de "./components/Header";
importer le pied de page de "./components/Footer";
importer {BrowserRouter en tant que routeur, commutateur, route} de "react-router-dom";
importer MoviesList depuis "./pages/MoviesListPage";
importation de PersonsList depuis "./pages/PersonsListPage";

function App () {

  revenir (
      
        

          

          
            
              
            
            
              
            
          
        
        

Il s'agit d'une configuration standard pour le routage avec react-router-dom. Vous pouvez le vérifier dans leur documentation . Nous avons importé nos composants Header Footer PersonsList et MovieList . Nous avons ensuite configuré le react-router-dom en enveloppant le tout dans Router et Switch .

Puisque nous voulons que nos pages partagent le même en-tête et pied de page, nous avons dû passer les composants