Како започети са Гатсби 2 и Редук-ом

Гатсби + Редук је моћна комбинација приликом израде статичних веб апликација са динамичким функцијама. Са Гатсби 2 никада није било лакше устати и покренути се. Данас ћу вас водити кроз потребне кораке.

Нисте велики љубитељ читања? ? Одмах пређите на стартер Редук-а:

хттпс://гитхуб.цом/цаки0915/гатсби-редук-тест/

или користите Гатсби ЦЛИ:

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

Шта је Гатсби?

Гатсби је један од најпопуларнијих генератора статичких локација. Преконфигурисани са Вебпацк, Реацт и ГрапхКЛ, пружају вам сјајну предност приликом израде веб апликација. Такође долази са богатим еко-системом додатака који олакшава повезивање са разним изворима података. Прочитајте више о Гатсби-у на њиховој веб страници.

Шта је Редук?

Редук је државни контејнер који се често користи заједно са Реацт апликацијама. Овај чланак претпоставља да већ знате како Редук ради. Ако сте нови у Редук-у или вам је потребан преглед, више информација ћете пронаћи на њиховој веб локацији.

? Идемо! ?

Почните са израдом новог Гатсби пројекта. У терминала, покрените: (Замените Гетсби-Редук-теста са именом по вашем избору)

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

Следећи корак је инсталација reduxи react-reduxпакети из НПМ-а.

npm install --save redux react-redux

Ок сјајно, додајмо државу!

Направите нову фасциклу која се зове stateунутар ваше srcфасцикле и креирајте датотеку app.js. Ради овог водича додаћемо једноставну функцију која вам омогућава да укључујете и искључујете променљиву „ даркМоде“ .

Прво додајте почетно стање:

const initialState = { isDarkMode: false, };

Додајте креатора радње (да бисте укључили и искључили даркМоде ):

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фасцикли. Ова компонента ће умотати нашу основну компоненту у Гатсби.

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-browser.jsи gatsby-ssr.js.

Кука која нас занима назива се врапРоотЕлемент и омогућава вам да омотате своју апликацију прилагођеним елементом. Управо оно што нам треба за нашег Редук добављача. ? Више о врапРоотЕлементу можете прочитати у документацији.

Будући да желимо да извеземо наш РедукВраппер као врапРоотЕлемент из обе gatsby-browser.jsи gatsby-ssr.js, додајте овај ред у обе датотеке:

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

Ок, готово. Гатсби и Редук сада раде заједно! ? Сада нам треба само начин да то тестирамо.

Идемо на најлакши могући начин на који могу да се сетим: Дугме на почетној страници где се може укључити и искључити даркМоде . Када је укључен режим даркМоде , дугме ће бити тамно са белим текстом.

У извођењу терминала:

npm run develop

И ... видите тамну тему на делу!

Ок, можда то и није било толико импресивно, али пример ради свој посао и сигуран сам да ћете у својој Гатсби-апликацији пронаћи много бољу апликацију за Редук. ?

Резиме

Гатсби + Редук је моћна комбинација ако желите да направите статичне веб-апликације са динамичким функцијама. Користим га и за своје пројекте. Ако вам је овај чланак користан, додајте коментар и везу до своје сјајне апликације Гатсби / Редук. ? ?