Sådan kommer du i gang med Gatsby 2 og Redux

Gatsby + Redux er en kraftfuld kombination, når man bygger statiske web-apps med dynamiske funktioner. Med Gatsby 2 har det aldrig været nemmere at komme i gang. I dag vil jeg guide dig gennem de nødvendige trin.

Ikke en stor fan af læsning? ? Gå straks over til Redux starter:

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

eller brug Gatsby CLI:

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

Hvad er Gatsby?

Gatsby er en af ​​de mest populære statiske stedgeneratorer derude. Forudkonfigureret med Webpack, React og GraphQL giver det dig en god start, når du bygger web-apps. Det leveres også med et rigt økosystem med plugins, der gør det let at oprette forbindelse til en række datakilder. Læs mere om Gatsby på deres hjemmeside.

Hvad er Redux?

Redux er en statscontainer, der ofte bruges sammen med React-apps. Denne artikel antager, at du allerede ved, hvordan Redux fungerer. Hvis du er ny hos Redux eller har brug for et resumé, finder du flere oplysninger på deres hjemmeside.

? Lad os gå! ?

Start med at oprette et nyt Gatsby-projekt. Kør i terminalen: (Udskift gatsby-redux-test med et navn efter eget valg)

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

Næste trin er at installere reduxog react-reduxpakker fra NPM.

npm install --save redux react-redux

Ok godt, lad os tilføje en stat!

Opret en ny mappe, der hedder stateinde i din srcmappe, og opret en fil app.js. Af hensyn til denne vejledning vil vi tilføje en enkel funktion, der lader dig skifte en variabel “ darkMode” til og fra.

Først skal du tilføje den oprindelige tilstand:

const initialState = { isDarkMode: false, };

Tilføj handlingsskaberen (for at slå darkMode til og fra):

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

Tilføj reduceringsenheden:

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

Ok godt! Lad os nu tilføje root-reducereren. Opret en ny fil index.jsinde i statemappen.

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

Nu skal vi oprette en butik og udbyder. Opret en ny fil ReduxWrapper.jsi statemappen. Denne komponent vil pakke vores rodkomponent i Gatsby.

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 gengiver vores app både på serveren og i browseren, og heldig for os har Gatsby en meget fleksibel API, der lader os tilslutte sig gengivelsen. ? Vi kan implementere kroge fra to filer: gatsby-browser.jsog gatsby-ssr.js.

Den krog, vi er interesseret i, kaldes wrapRootElement og lader dig pakke din app med et brugerdefineret element. Præcis hvad vi har brug for til vores Redux-udbyder. ? Du kan læse mere om wrapRootElement i dokumentationen.

Da vi vil eksportere vores ReduxWrapper som wrapRootElement fra begge, gatsby-browser.jsog gatsby-ssr.jstilføj denne linje til begge filer:

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

Ok, færdig. Gatsby og Redux arbejder nu sammen! ? Nu har vi kun brug for en måde at teste det på.

Lad os gå på den nemmest mulige måde, jeg kan tænke på: En knap på startsiden, hvor man kan slå darkMode til og fra. Når darkMode er tændt, er knappen mørk med hvid tekst.

I terminalkørslen:

npm run develop

Og… se det mørke tema i aktion!

Ok, måske var det ikke så imponerende, men eksemplet gør sit job, og jeg er sikker på, at du finder en meget bedre applikation til Redux i din Gatsby-app. ?

Resumé

Gatsby + Redux er en kraftfuld kombination, hvis du vil opbygge statiske web-apps med dynamiske funktioner. Jeg bruger det også til mine projekter. Hvis du finder denne artikel nyttig, skal du tilføje en kommentar og et link til din fantastiske Gatsby / Redux-app. ? ?