Kuinka aloittaa Gatsby 2 ja Redux

Gatsby + Redux on tehokas yhdistelmä, kun rakennetaan staattisia verkkosovelluksia, joissa on dynaamisia ominaisuuksia. Gatsby 2: n avulla ei ole koskaan ollut helpompaa päästä ylös ja juosta. Tänään aion opastaa sinut tarvittavien vaiheiden läpi.

Etkö ole suuri lukemisfani? ? Suuntaa heti Redux-käynnistimeen:

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

tai käytä Gatsby CLI: tä:

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

Mikä on Gatsby?

Gatsby on yksi suosituimmista staattisten sivustojen generaattoreista. Valmiiksi määritetty Webpack, React ja GraphQL, se antaa sinulle hyvän etenemisen web-sovellusten rakentamisessa. Siinä on myös rikas laajennusten ekosysteemi, jonka avulla on helppo muodostaa yhteys useisiin tietolähteisiin. Lue lisää Gatsbystä heidän verkkosivuillaan.

Mikä on Redux?

Redux on tilakontti, jota käytetään usein yhdessä React-sovellusten kanssa. Tässä artikkelissa oletetaan, että tiedät jo Reduxin toiminnan. Jos olet uusi Redux-käyttäjä tai tarvitset yhteenvedon, löydät lisätietoja heidän verkkosivustoltaan.

? Mennään! ?

Aloita luomalla uusi Gatsby-projekti. Terminaalissa, run: (Korvaa Gatsby-Redux-testi , jossa nimi valitsemasi)

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

Seuraava vaihe on asentaa reduxja react-reduxpaketit NPM: stä.

npm install --save redux react-redux

Okei, lisätään valtio!

Luo uusi kansio nimeltä statesisällä oman srckansion ja luoda tiedoston app.js. Tämän opetusohjelman vuoksi aiomme lisätä yksinkertaisen ominaisuuden, jonka avulla voit vaihtaa muuttujan " darkMode" päälle ja pois päältä.

Lisää ensin alkutila:

const initialState = { isDarkMode: false, };

Lisää toiminnon luoja ( tumman tilan kytkemiseksi päälle ja pois päältä):

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

Lisää pelkistin:

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

Okei hienoa! Lisätään nyt juuren vähennysventtiili. Luo uusi tiedosto index.jssisällä statekansio.

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

Nyt aiomme luoda myymälän ja palveluntarjoajan. Luo uusi tiedosto ReduxWrapper.json statekansiossa. Tämä komponentti kietoo juurikomponenttimme Gatsbyssa.

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 renderöi sovelluksemme sekä palvelimella että selaimessa, ja onneksi meille Gatsbylla on erittäin joustava sovellusliittymä, jonka avulla voimme tarttua renderöintiin. ? Koukut voidaan toteuttaa kahdesta tiedostosta: gatsby-browser.jsja gatsby-ssr.js.

Kiinnostamme koukku on nimeltään wrapRootElement ja sen avulla voit kääri sovelluksesi mukautetulla elementillä. Tarkalleen mitä tarvitsemme Redux-palveluntarjoajalle. ? Voit lukea lisää wrapRootElementista dokumentaatiosta.

Koska haluamme viedä ReduxWrapper kuin wrapRootElement molemmista gatsby-browser.jsja gatsby-ssr.jslisäämällä tämä rivi molemmat tiedostot:

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

OK tehty. Gatsby ja Redux työskentelevät nyt yhdessä! ? Tarvitsemme vain tapaa testata sitä.

Mennään helpoimmalle mahdolliselle tavalle, jonka voin ajatella: Aloitussivun painike, jolla darkMode voidaan kytkeä päälle ja pois. Kun darkMode on päällä, painike on tumma valkoisella tekstillä.

Terminaalin ajon aikana:

npm run develop

Ja… näe pimeä teema toiminnassa!

Ok, ehkä se ei ollut niin vaikuttava, mutta esimerkki tekee työnsä ja olen varma, että löydät paljon paremman sovelluksen Reduxille Gatsby-sovelluksestasi. ?

Yhteenveto

Gatsby + Redux on tehokas yhdistelmä, jos haluat rakentaa staattisia web-sovelluksia, joissa on dynaamisia ominaisuuksia. Käytän sitä myös projekteihini. Jos pidät tästä artikkelista hyödyllistä, lisää kommentti ja linkki mahtavaan Gatsby / Redux-sovellukseesi. ? ?