Πώς να ξεκινήσετε με το Gatsby 2 και το Redux

Το Gatsby + Redux είναι ένας ισχυρός συνδυασμός κατά τη δημιουργία στατικών εφαρμογών ιστού με δυναμικές δυνατότητες. Με το Gatsby 2, δεν ήταν ποτέ πιο εύκολο να ξεκινήσετε και να τρέξετε. Σήμερα, θα σας καθοδηγήσω στα απαραίτητα βήματα.

Δεν είστε λάτρης της ανάγνωσης; ; Προχωρήστε αμέσως στον εκκινητή Redux:

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

ή χρησιμοποιήστε το Gatsby CLI:

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

Τι είναι το Gatsby;

Το Gatsby είναι μια από τις πιο δημοφιλείς δημιουργίες στατικών ιστότοπων εκεί έξω. Προκατασκευασμένο με το Webpack, το React και το GraphQL, σας προσφέρει μια εξαιρετική αρχή κατά τη δημιουργία εφαρμογών ιστού. Έρχεται επίσης με ένα πλούσιο οικολογικό σύστημα προσθηκών που διευκολύνει τη σύνδεση σε μια ποικιλία πηγών δεδομένων. Διαβάστε περισσότερα για το Gatsby στον ιστότοπό τους.

Τι είναι το Redux;

Το Redux είναι ένα κοντέινερ κατάστασης που χρησιμοποιείται συχνά μαζί με εφαρμογές React. Αυτό το άρθρο θα υποθέσει ότι γνωρίζετε ήδη πώς λειτουργεί το Redux. Εάν είστε νέοι στο Redux ή χρειάζεστε μια ανακεφαλαίωση, θα βρείτε περισσότερες πληροφορίες στον ιστότοπό τους.

; Πάμε! ;

Ξεκινήστε δημιουργώντας ένα νέο έργο Gatsby. Στο τερματικό, εκτελέστε: (Αντικαταστήστε το gatsby-redux-test με το όνομα της επιλογής σας)

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

Το επόμενο βήμα είναι η εγκατάσταση reduxκαι react-reduxπακέτα από το NPM.

npm install --save redux react-redux

Εντάξει, ας προσθέσουμε μια κατάσταση!

Δημιουργήστε έναν νέο φάκελο που ονομάζεται stateμέσα στον srcφάκελό σας και δημιουργήστε ένα αρχείο app.js. Για χάρη αυτού του σεμιναρίου, θα προσθέσουμε μια απλή λειτουργία που σας επιτρέπει να ενεργοποιήσετε και να απενεργοποιήσετε μια μεταβλητή " darkMode" .

Αρχικά, προσθέστε την αρχική κατάσταση:

const initialState = { isDarkMode: false, };

Προσθέστε τον δημιουργό ενεργειών (για να ενεργοποιήσετε και να απενεργοποιήσετε το darkMode ):

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

Προσθέστε τον μειωτήρα:

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

Εντάξει μια χαρά! Τώρα, ας προσθέσουμε τον μειωτή ρίζας. Δημιουργήστε ένα νέο αρχείο index.jsμέσα στο stateφάκελο.

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

Τώρα πρόκειται να δημιουργήσουμε ένα κατάστημα και πάροχο. Δημιουργήστε ένα νέο αρχείο ReduxWrapper.jsστο stateφάκελο. Αυτό το στοιχείο θα ολοκληρώσει το ριζικό συστατικό μας στο 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 θα καταστήσει την εφαρμογή μας τόσο στο διακομιστή όσο και στο πρόγραμμα περιήγησης, και τυχερός για εμάς το Gatsby διαθέτει ένα πολύ ευέλικτο API που μας επιτρέπει να συνδέσουμε την απόδοση. ; Μπορούμε να εφαρμόσουμε τα άγκιστρα από δύο αρχεία: gatsby-browser.jsκαι gatsby-ssr.js.

Το άγκιστρο που μας ενδιαφέρει ονομάζεται wrapRootElement και σας επιτρέπει να τυλίξετε την εφαρμογή σας με ένα προσαρμοσμένο στοιχείο. Ακριβώς αυτό που χρειαζόμαστε για τον πάροχο Redux. ; Μπορείτε να διαβάσετε περισσότερα για το wrapRootElement στην τεκμηρίωση.

Δεδομένου ότι θέλουμε να εξάγουμε το ReduxWrapper ως wrapRootElement και από τα δύο gatsby-browser.jsκαι gatsby-ssr.js, προσθέστε αυτήν τη γραμμή και στα δύο αρχεία:

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

ΕΝΤΑΞΕΙ Εγινε. Η Gatsby και η Redux συνεργάζονται τώρα! ; Τώρα χρειαζόμαστε μόνο έναν τρόπο να το δοκιμάσουμε.

Ας πάμε για τον ευκολότερο δυνατό τρόπο που μπορώ να σκεφτώ: Ένα κουμπί στην αρχική σελίδα όπου μπορεί κανείς να ενεργοποιήσει και να απενεργοποιήσει το darkMode . Όταν το darkMode είναι ενεργοποιημένο, το κουμπί θα είναι σκοτεινό με λευκό κείμενο.

Στο τερματικό τρέξιμο:

npm run develop

Και… δείτε το σκοτεινό θέμα σε δράση!

Εντάξει, ίσως αυτό δεν ήταν τόσο εντυπωσιακό, αλλά το παράδειγμα κάνει τη δουλειά του και είμαι σίγουρος ότι θα βρείτε μια πολύ καλύτερη εφαρμογή για το Redux στην εφαρμογή Gatsby. ;

Περίληψη

Το Gatsby + Redux είναι ένας ισχυρός συνδυασμός εάν θέλετε να δημιουργήσετε στατικές εφαρμογές ιστού με δυναμικές δυνατότητες. Το χρησιμοποιώ και για τα έργα μου. Εάν βρείτε αυτό το άρθρο χρήσιμο, προσθέστε ένα σχόλιο και έναν σύνδεσμο για την εκπληκτική εφαρμογή Gatsby / Redux. ; ;