Comment démarrer avec Gatsby 2 et Redux

Gatsby 2 et Redux se mélangent comme des bonbons dans un bocal

Gatsby + Redux est une combinaison puissante pour la création d'applications Web statiques avec des fonctionnalités dynamiques. Avec Gatsby 2, il n’a jamais été aussi simple d’être opérationnel. Aujourd’hui, je vais vous guider à travers les étapes nécessaires.

Pas un grand fan de lecture? Rendez-vous immédiatement sur le démarreur Redux:
https://github.com/caki0915/gatsby-redux-test/
ou utilisez la CLI Gatsby:

npx gatsby new gatsby-redux-test https://github.com/caki0915/gatsby-redux-test/

Qu'est-ce que Gatsby?

Gatsby est l’un des générateurs de sites statiques les plus populaires. Préconfiguré avec Webpack, React et GraphQL, il vous donne une longueur d'avance lorsque vous créez des applications Web. Il est également livré avec un éco-système riche en plugins qui facilite la connexion à diverses sources de données. En savoir plus sur Gatsby sur leur site web.

Qu'est-ce que Redux?

Redux est un conteneur d'état souvent utilisé avec les applications React. Cet article suppose que vous savez déjà comment fonctionne Redux. Si vous êtes nouveau sur Redux ou avez besoin d’une récapitulation, vous trouverez plus d’informations sur leur site Web.

Allons-y!

Commencez par créer un nouveau projet Gatsby. Dans le terminal, lancez: (Remplacez gatsby-redux-test par le nom de votre choix)

npx gatsby new gatsby-redux-test & cd gatsby-redux-test

La prochaine étape consiste à installer les packages redux et react-redux de NPM.

npm installer --save redux réagir-redux
Paquets Redux et React-redux installés

Ok super, ajoutons un état!

Créez un nouveau dossier appelé state dans votre dossier src et créez un fichier app.js. Pour les besoins de ce didacticiel, nous allons ajouter une fonctionnalité simple qui vous permet d’activer et de désactiver une variable «darkMode».

Tout d'abord, ajoutez l'état initial:

const initialState = {
  isDarkMode: false,
};

Ajoutez le créateur de l'action (pour activer / désactiver darkMode):

const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';
export const toggleDarkMode = isDarkMode => ({
  type: TOGGLE_DARKMODE, isDarkMode
});

Ajouter le réducteur:

défaut d'exportation (state = initialState, action) => {
  commutateur (action.type) {
    case TOGGLE_DARKMODE:
      return {... state, isDarkMode: action.isDarkMode};
    défaut:
      état de retour;
  }
};
Etat initial, créateur d'action et réducteur

OK super! Ajoutons maintenant le réducteur de racine. Créez un nouveau fichier index.js dans le dossier state.

importer {combineReducers} de 'redux';
importer l'application de './app';
exporter les combinés par défaut ({app});
Notre réducteur de racine.

Nous allons maintenant créer un magasin et un fournisseur. Créez un nouveau fichier ReduxWrapper.js dans le dossier d'état. Ce composant va envelopper notre composant racine dans Gatsby.

import Réagir de 'réagir';
importer {fournisseur} de 'react-redux';
importer {createStore as reduxCreateStore} à partir de 'redux';
importer rootReducer de '.';
const createStore = () => reduxCreateStore (rootReducer);
export default ({element}) => (
   {élément} 
)
Créer un magasin et un fournisseur

Gatsby rendra notre application à la fois sur le serveur et dans le navigateur, et heureusement pour nous, Gatsby dispose d'une API très flexible qui nous permet de nous accrocher au rendu. Nous pouvons implémenter les points d'ancrage à partir de deux fichiers: gatsby-browser.js et gatsby-ssr.js.

Le hook qui nous intéresse s'appelle wrapRootElement et vous permet d'envelopper votre application avec un élément personnalisé. Exactement ce dont nous avons besoin pour notre fournisseur Redux. Vous pouvez en savoir plus sur wrapRootElement dans la documentation.

Puisque nous voulons exporter notre ReduxWrapper en tant que wrapRootElement à partir des fichiers gatsby-browser.js et gatsby-ssr.js, ajoutez cette ligne aux deux fichiers:

export {default as wrapRootElement} à partir de './src/state/ReduxWrapper';
Exportez notre ReduxWrapper depuis gatsby-ssr.js et gatsby-browser.js

OK fait. Gatsby et Redux travaillent maintenant ensemble! Maintenant, nous avons seulement besoin d'un moyen de le tester.

Soyons le plus simple possible: Un bouton sur la page de démarrage où l’on peut activer / désactiver darkMode. Lorsque darkMode est activé, le bouton sera sombre avec du texte blanc.

Un simple test pour voir que Redux fonctionne réellement.

Dans le terminal:

npm run develop

Et… voyez le thème sombre en action!

Exemple de redux minimal

Ok, peut-être que ce n’était pas si impressionnant, mais l’exemple fait son travail et je suis sûr que vous trouverez une bien meilleure application pour Redux dans votre application Gatsby.

Sommaire

Gatsby + Redux est une combinaison puissante si vous souhaitez créer des applications Web statiques avec des fonctionnalités dynamiques. Je l'utilise aussi pour mes projets. Si vous trouvez cet article utile, veuillez ajouter un commentaire et un lien vers votre géniale Gatsby / Redux-app.

https://carljohan.me - Un tiroir est un bon cas d'utilisation pour Redux