Hogyan kezdjük el a Gatsby 2-t és a Redux-et

A Gatsby + Redux egy erőteljes kombináció, amikor statikus webalkalmazásokat építenek dinamikus funkciókkal. A Gatsby 2-vel soha nem volt ilyen egyszerű felállni és futni. Ma végigvezetek benneteket a szükséges lépéseken.

Nem nagy rajongója az olvasásnak? ? Haladjon azonnal a Redux indítóhoz:

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

vagy használja a Gatsby CLI-t:

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

Mi az a Gatsby?

A Gatsby az egyik legnépszerűbb statikus webhely-generátor. A Webpack, a React és a GraphQL segítségével előre konfigurálva nagyszerű előrelépést nyújt a webalkalmazások építésénél. Gazdag öko-plugin-rendszerrel is rendelkezik, amely megkönnyíti a csatlakozást különféle adatforrásokhoz. További információ a Gatsby-ról a weboldalukon.

Mi az a Redux?

A Redux egy állapottartály, amelyet gyakran a React alkalmazásokkal együtt használnak. Ez a cikk feltételezi, hogy már tudja, hogyan működik a Redux. Ha Ön még nem ismeri a Redux alkalmazását, vagy összefoglalóra van szüksége, akkor további információkat talál a weboldalukon.

? Gyerünk! ?

Kezdje egy új Gatsby-projekt létrehozásával. A terminál, run: (Cserélje Gatsby-Redux-teszt a nevét az Ön által választott)

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

A következő lépés az NPM telepítése reduxés a react-reduxcsomagok telepítése .

npm install --save redux react-redux

Rendben, adjunk hozzá egy államot!

Hozzon létre egy új mappát statea srcmappa belsejében, és hozzon létre egy fájlt app.js. A bemutató érdekében felveszünk egy egyszerű funkciót, amely lehetővé teszi a változó „ darkMode” be- és kikapcsolását.

Először adja hozzá a kezdeti állapotot:

const initialState = { isDarkMode: false, };

Adja hozzá az akciókészítőt (a darkMode be- és kikapcsolásához):

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

Adja hozzá a szűkítőt:

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

Jólvan szuper! Most tegyük hozzá a gyökérszűkítőt. Hozzon létre egy új fájlt index.jsa statemappában.

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

Most létrehozunk egy áruházat és szolgáltatót. Hozzon létre egy új fájlt ReduxWrapper.jsa statemappában. Ez az összetevő a gyökérkomponensünket Gatsby-ba fogja csomagolni.

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} );

A Gatsby a szerveren és a böngészőben egyaránt megjeleníti alkalmazásunkat, és szerencsés számunkra. A Gatsby nagyon rugalmas API-val rendelkezik, amely lehetővé teszi, hogy bekapcsolódjunk a renderelésbe. ? Két akcióból tudjuk megvalósítani a horgokat: gatsby-browser.jsés gatsby-ssr.js.

Az általunk érdekelt kampó wrapRootElement névre hallgat, és lehetővé teszi az alkalmazás egyedi elemekkel történő csomagolását. Pontosan amire szükségünk van a Redux szolgáltatónkhoz. ? A wrapRootElementről a dokumentációban olvashat bővebben .

Mivel azt szeretnénk, hogy az export tevékenység ReduxWrapper mint wrapRootElement egyaránt gatsby-browser.js, és gatsby-ssr.js, ezt a sort mindkét fájlt:

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

Rendben kész. Gatsby és Redux most együtt dolgoznak! ? Most csak arra van szükségünk, hogy teszteljük.

Menjünk a lehető legegyszerűbb módon, amire csak gondolni tudok: Egy gomb a kezdőlapon, ahol be- és kikapcsolhatjuk a darkMode -ot. Ha a darkMode be van kapcsolva, a gomb sötét lesz, fehér szöveggel.

A terminál futtatásakor:

npm run develop

És… nézze meg a sötét témát!

Ok, lehet, hogy ez nem volt annyira lenyűgöző, de a példa elvégzi a dolgát, és biztos vagyok benne, hogy a Gatsby alkalmazásban sokkal jobb alkalmazást talál a Redux számára. ?

Összegzés

A Gatsby + Redux hatékony kombináció, ha statikus webalkalmazásokat szeretne létrehozni dinamikus funkciókkal. A projektjeimhez is felhasználom. Ha hasznosnak találja ezt a cikket, kérjük, írjon hozzá egy megjegyzést és egy linket a fantasztikus Gatsby / Redux alkalmazáshoz. ? ?