Gatsby + Redux snažna je kombinacija prilikom izrade statičkih web-aplikacija s dinamičkim značajkama. S Gatsbyjem 2 nikada nije bilo lakše ustati i pokrenuti se. Danas ću vas voditi kroz potrebne korake.
Niste veliki ljubitelj čitanja? ? Odmah krenite u Redux starter:
https://github.com/caki0915/gatsby-redux-test/
ili upotrijebite Gatsby CLI:
npx gatsby new gatsby-redux-test //github.com/caki0915/gatsby-redux-test/Što je Gatsby?
Gatsby je jedan od najpopularnijih generatora statičkih stranica. Unaprijed konfiguriran s Webpackom, Reactom i GraphQL-om, pruža vam sjajnu prednost prilikom izrade web-aplikacija. Također dolazi s bogatim eko-sustavom dodataka koji olakšava povezivanje s raznim izvorima podataka. Pročitajte više o Gatsbyju na njihovoj web stranici.
Što je Redux?
Redux je državni spremnik koji se često koristi zajedno s React aplikacijama. Ovaj će članak pretpostaviti da već znate kako Redux radi. Ako ste novi u Reduxu ili vam treba rekapitulacija, više informacija pronaći ćete na njihovom web mjestu.
? Idemo! ?
Započnite s izradom novog Gatsby projekta. U terminala, staze: (Zamijenite Gatsby-Redux test s imenom po vašem izboru)
npx gatsby new gatsby-redux-test && cd gatsby-redux-testSljedeći je korak instalacija reduxi react-reduxpaketi iz NPM-a.
npm install --save redux react-redux
Ok super, dodajmo državu!
Stvorite novu mapu koja se zove stateunutar vaše srcmape i stvorite datoteku app.js. Radi ovog vodiča dodat ćemo jednostavnu značajku koja vam omogućuje uključivanje i isključivanje varijable " darkMode" .
Prvo dodajte početno stanje:
const initialState = { isDarkMode: false, };Dodajte kreatora radnje (za uključivanje i isključivanje darkMode ):
const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE'; export const toggleDarkMode = isDarkMode => ({ type: TOGGLE_DARKMODE, isDarkMode });Dodajte reduktor:
export default (state = initialState, action) => { switch (action.type) { case TOGGLE_DARKMODE: return { ...state, isDarkMode: action.isDarkMode }; default: return state; } };
Ok super! Sad, dodajmo root-reduktor. Stvorite novu datoteku index.jsunutar statemape.
import { combineReducers } from 'redux'; import app from './app'; export default combineReducers({ app });
Sada ćemo stvoriti trgovinu i dobavljača. Stvorite novu datoteku ReduxWrapper.jsu statemapi. Ova će komponenta omotati našu korijensku komponentu u 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 će našu aplikaciju prikazivati i na poslužitelju i u pregledniku, a naša sreća je što Gatsby ima vrlo fleksibilan API koji nam omogućuje priključivanje na prikaz. ? Kuke možemo implementirati iz dvije datoteke: gatsby-browser.jsi gatsby-ssr.js.
Udica koja nas zanima naziva se wrapRootElement i omogućuje vam omotavanje aplikacije prilagođenim elementom. Upravo ono što nam treba za našeg pružatelja usluge Redux. ? Više o wrapRootElementu možete pročitati u dokumentaciji.
Budući da želimo izvesti ReduxWrapper kao wrapRootElement iz obje gatsby-browser.jsi gatsby-ssr.js, dodajte ovaj redak u obje datoteke:
export { default as wrapRootElement } from './src/state/ReduxWrapper';
U redu, gotovo. Gatsby i Redux sada rade zajedno! ? Sad nam treba samo način da to testiramo.
Idemo na najjednostavniji mogući način na koji se mogu sjetiti: gumb na početnoj stranici gdje se može uključiti i isključiti darkMode . Kad je uključen darkMode , gumb će biti taman s bijelim tekstom.
U izvođenju terminala:
npm run developI ... pogledajte tamnu temu na djelu!
Ok, možda to i nije bilo toliko impresivno, ali primjer radi svoj posao i siguran sam da ćete u svojoj Gatsby-aplikaciji pronaći puno bolju aplikaciju za Redux. ?
Sažetak
Gatsby + Redux snažna je kombinacija ako želite graditi statične web-aplikacije s dinamičkim značajkama. Koristim ga i za svoje projekte. Ako vam je ovaj članak koristan, dodajte komentar i vezu na svoju sjajnu aplikaciju Gatsby / Redux. ? ?
