Как да започнете с Gatsby 2 и Redux

Gatsby + Redux е мощна комбинация при създаване на статични уеб приложения с динамични функции. С Gatsby 2 никога не е било по-лесно да ставате и да бягате. Днес ще ви насоча през необходимите стъпки.

Не сте голям почитател на четенето? Преминете веднага към стартера Redux:
https://github.com/caki0915/gatsby-redux-test/
или използвайте Gatsby CLI:

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

Какво е Гетсби?

Гетсби е един от най-популярните генератори на статични сайтове там. Предварително конфигуриран с Webpack, React и GraphQL, той ви дава страхотна преднина при създаването на уеб приложения. Освен това той предлага богата екосистема от приставки, която улеснява свързването с различни източници на данни. Прочетете повече за Гетсби на техния уебсайт.

Какво е Redux?

Redux е контейнер за състояния, често използван заедно с приложения React. Тази статия ще предположи, че вече знаете как работи Redux. Ако сте нов в Redux или се нуждаете от прескачане, ще намерите повече информация на уебсайта им.

Да тръгваме!

Започнете със създаването на нов проект на Гетсби. В терминала изпълнете: (Заменете gatsby-redux-test с име по ваш избор)

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

Следващата стъпка е да инсталирате redux и react-redux пакети от NPM.

npm install - запазване на redux react-redux

Добре, нека добавим състояние!

Създайте нова папка, наречена състояние вътре във вашата папка src и създайте файл app.js. За целта на този урок ще добавим проста функция, която ви позволява да включвате и изключвате променлива „darkMode“.

Първо, добавете първоначалното състояние:

const началоState = {
  isDarkMode: false,
};

Добавете създателя на действие (за включване и изключване на darkMode):

const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';

export const toggleDarkMode = isDarkMode => ({
  тип: TOGGLE_DARKMODE, isDarkMode
});

Добавете редуктора:

експортиране по подразбиране (състояние = първоначално състояние, действие) => {
  превключвател (action.type) {
    случай TOGGLE_DARKMODE:
      връщане {... състояние, isDarkMode: action.isDarkMode};
    по подразбиране:
      състояние на връщане;
  }
};

ОК страхотно! Сега, нека добавим коректор-редуктор. Създайте нов файл index.js вътре в папката на състоянието.

import {combReducers} от 'redux';
приложение за импортиране от „./app“;

експортиране по подразбиране combReducers ({app});

Сега ще създадем магазин и доставчик. Създайте нов файл ReduxWrapper.js в папката на състоянието. Този компонент ще обвие нашия корен в Gatsby.

import React от 'реагира';
import {Доставчик} от 'react-redux';
import {createStore as reduxCreateStore} от 'redux';
импортиране на rootReducer от '.';

const createStore = () => reduxCreateStore (rootReducer);

експортиране по подразбиране ({елемент}) => (
   {елемент} 
);

Gatsby ще рендира нашето приложение както на сървъра, така и в браузъра, а за късмет за нас Gatsby има много гъвкав API, който ни позволява да се закачим в рендеринга. Можем да реализираме куките от два файла: gatsby-browser.js и gatsby-ssr.js.

Куката, от която се интересуваме, се нарича wrapRootElement и ви позволява да увиете приложението си с персонализиран елемент. Точно това, от което се нуждаем за нашия Redux доставчик. Можете да прочетете повече за wrapRootElement в документацията.

Тъй като искаме да експортираме нашия ReduxWrapper като wrapRootElement от gatsby-browser.js и gatsby-ssr.js, добавете този ред и към двата файла:

експортиране {по подразбиране като wrapRootElement} от './src/state/ReduxWrapper';

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

Нека да преминем по най-лесния възможен начин, за който се сещам: Бутон в началната страница, където човек може да включва и изключва darkMode. Когато е включен darkMode, бутонът ще бъде тъмен с бял текст.

В терминалния цикъл:

npm run се развива

И ... вижте тъмната тема в действие!

Ок, може би това не беше толкова впечатляващо, но примерът върши своята работа и съм сигурен, че ще намерите много по-добро приложение за Redux във вашето Gatsby-приложение.

резюме

Gatsby + Redux е мощна комбинация, ако искате да създадете статични уеб приложения с динамични функции. Използвам го и за моите проекти. Ако смятате тази статия за полезна, моля, добавете коментар и линк към страхотното си приложение Gatsby / Redux.