Erste Schritte mit Gatsby 2 und Redux

Gatsby + Redux ist eine leistungsstarke Kombination beim Erstellen statischer Web-Apps mit dynamischen Funktionen. Mit Gatsby 2 war es noch nie einfacher, den Betrieb aufzunehmen. Heute werde ich Sie durch die erforderlichen Schritte führen.

Kein großer Fan des Lesens? ? Gehen Sie sofort zum Redux-Starter:

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

oder verwenden Sie die Gatsby CLI:

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

Was ist Gatsby?

Gatsby ist einer der beliebtesten Generatoren für statische Websites. Mit Webpack, React und GraphQL vorkonfiguriert, bietet es Ihnen einen großen Vorsprung beim Erstellen von Web-Apps. Es kommt auch mit einem reichhaltigen Ökosystem von Plugins, die es einfach machen, eine Verbindung zu einer Vielzahl von Datenquellen herzustellen. Lesen Sie mehr über Gatsby auf ihrer Website.

Was ist Redux?

Redux ist ein Statuscontainer, der häufig zusammen mit React-Apps verwendet wird. In diesem Artikel wird davon ausgegangen, dass Sie bereits wissen, wie Redux funktioniert. Wenn Sie neu bei Redux sind oder eine Zusammenfassung benötigen, finden Sie weitere Informationen auf der Website.

? Lass uns gehen! ?

Erstellen Sie zunächst ein neues Gatsby-Projekt. Führen Sie im Terminal Folgendes aus : (Ersetzen Sie den gatsby-redux-Test durch einen Namen Ihrer Wahl.)

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

Der nächste Schritt ist die Installation reduxund react-reduxPaketierung von NPM.

npm install --save redux react-redux

Ok toll, lass uns einen Staat hinzufügen!

Erstellen Sie einen neuen Ordner mit dem Namen statein Ihrem srcOrdner und erstellen Sie eine Datei app.js. Für dieses Tutorial werden wir eine einfache Funktion hinzufügen, mit der Sie eine Variable " darkMode" ein- und ausschalten können.

Fügen Sie zunächst den Ausgangszustand hinzu:

const initialState = { isDarkMode: false, };

Fügen Sie den Aktionsersteller hinzu (um darkMode ein- und auszuschalten):

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

Reduzierstück hinzufügen:

export default (state = initialState, action) => { switch (action.type) { case TOGGLE_DARKMODE: return { ...state, isDarkMode: action.isDarkMode }; default: return state; } };

Ok toll! Fügen wir nun den Root-Reducer hinzu. Erstellen Sie eine neue Datei index.jsim stateOrdner.

import { combineReducers } from 'redux'; import app from './app'; export default combineReducers({ app });

Jetzt erstellen wir einen Store und einen Provider. Erstellen Sie eine neue Datei ReduxWrapper.jsim stateOrdner. Diese Komponente wird unsere Root-Komponente in Gatsby verpacken.

import React from 'react'; import { Provider } from 'react-redux'; import { createStore as reduxCreateStore } from 'redux'; import rootReducer from '.'; const createStore = () => reduxCreateStore(rootReducer); export default ({ element }) => ( {element} );

Gatsby wird unsere App sowohl auf dem Server als auch im Browser rendern. Glücklicherweise verfügt Gatsby über eine sehr flexible API, mit der wir uns in das Rendering einbinden können. ? Wir können die Hooks aus zwei Dateien implementieren: gatsby-browser.jsund gatsby-ssr.js.

Der Hook, an dem wir interessiert sind, heißt wrapRootElement und ermöglicht es Ihnen, Ihre App mit einem benutzerdefinierten Element zu versehen. Genau das, was wir für unseren Redux-Anbieter brauchen. ? Weitere Informationen zu wrapRootElement finden Sie in der Dokumentation.

Da wir wollen , dass unsere exportieren ReduxWrapper als wrapRootElement sowohl aus gatsby-browser.jsund gatsby-ssr.jsfügen Sie diese Zeile in beiden Dateien:

export { default as wrapRootElement } from './src/state/ReduxWrapper';

OK, fertig. Gatsby und Redux arbeiten jetzt zusammen! ? Jetzt brauchen wir nur noch einen Weg, um es zu testen.

Lassen Sie uns den einfachsten Weg gehen, den ich mir vorstellen kann: Eine Schaltfläche auf der Startseite, mit der Sie darkMode ein- und ausschalten können. Wenn darkMode aktiviert ist, ist die Schaltfläche mit weißem Text dunkel.

Im Terminallauf:

npm run develop

Und… sehen Sie das dunkle Thema in Aktion!

Ok, vielleicht war das nicht so beeindruckend, aber das Beispiel macht seinen Job und ich bin sicher, dass Sie in Ihrer Gatsby-App eine viel bessere Anwendung für Redux finden werden. ?

Zusammenfassung

Gatsby + Redux ist eine leistungsstarke Kombination, wenn Sie statische Web-Apps mit dynamischen Funktionen erstellen möchten. Ich benutze es auch für meine Projekte. Wenn Sie diesen Artikel nützlich finden, fügen Sie bitte einen Kommentar und einen Link zu Ihrer fantastischen Gatsby / Redux-App hinzu. ? ?