Рубрики
Без рубрики

Как начать с GATSBY 2 и Redux

Carl-johan Kihl Как начать работу с GATSBY 2 и Reduxgatsby 2 и redux сочетаются вместе, такие как конфеты в яргацби + redux – это мощная комбинация при создании статических веб-приложений с динамическими функциями. С GATSBY 2 его никогда не было легче встать и бежать. Сегодня я

Автор оригинала: FreeCodeCamp Community Member.

Carl-johan Kihl

GATSBY + Redux – это мощная комбинация при строительстве статических веб-приложений с динамическими функциями. С GATSBY 2 его никогда не было легче встать и бежать. Сегодня я собираюсь направить вас через нужен шаги.

Не большой поклонник чтения? ? Перейдите к стартеру redux прямо сейчас: H TTPS://///github.com/caki0915/gatsby-redux-test/ Или используйте GATSBY CLI:

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

Что такое GATSBY?

GATSBY – один из самых популярных статических генераторов сайта. Предоплата с WebPack, React и GraphQL, он дает вам отличное начало головы при создании веб-приложений. Он также поставляется с богатой экосистемой плагинов, которые облегчают подключение к различным источникам данных. Узнайте больше о GATSBY на своем сайте.

Что такое redux?

Redux – это контейнер состояния, часто используемый вместе с реагированными приложениями. Эта статья предполагает, что вы уже знаете, как работает Redux. Если вы новичок в redux или нужны Recap, вы Больше информации на их сайте Отказ

? Пошли! ?

Начните с создания нового проекта GATSBY. В терминале запустить: (Заменить gatsby-redux-test с имя вашего выбора)

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

Следующий шаг – установить redux и React-redux Пакеты из НПМ.

npm install --save redux react-redux

Хорошо, отлично, давайте добавим состояние!

Создать новую папку под названием Государство внутри вашего SRC Папка и создать файл app.js Отказ Ради этого учебника мы собираемся добавить простой функцию, позволяющей вам переключить переменную « DarkMode» включить и выключить.

Сначала добавьте начальное состояние:

const initialState = {
  isDarkMode: false,
};

Добавьте Creator Action (чтобы поместить Dark Mode Вкл и ВЫКЛ):

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 внутри Государство папка.

import { combineReducers } from 'redux';
import app from './app';

export default combineReducers({ app });

Теперь мы собираемся создать магазин и провайдер. Создать новый файл Reduxwrapper.js В Государство папка. Этот компонент собирается обернуть наш корневой компонент в 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 Отказ

Крюк, который мы заинтересованы, называется Wraptreotelement И позволяет обернуть ваше приложение с помощью пользовательского элемента. Именно то, что нам нужно для провайдера Redux. ? Вы можете прочитать больше о Wraptreotelement В Документация Отказ

Так как мы хотим экспортировать наши Reduxwrapper как Wraptreotelement от обоих gatsby-browser.js и GATSBY-SSR.JS Добавьте эту строку в оба файла:

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

Все, сделано. GATSBY и Redux сейчас работают вместе! ? Теперь нам нужен только способ проверить его.

Пойдем за легкий возможный способ подумать: кнопка на старте странице, где можно переключить Темный режим включить и выключить. Когда Темный режим включен, кнопка будет темной с белым текстом.

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

npm run develop

И … увидеть темную тему в действии!

ОК, может быть, это было не так впечатляюще, но пример делает свою работу, и я уверен, что вы найдете гораздо лучшее приложение для Redux в вашем приложении GATSBY. ?

Резюме

GATSBY + Redux – это мощная комбинация, если вы хотите создать статические веб-приложения с динамическими функциями. Я использую его для моих проектов также. Если вы найдете эту статью полезную, добавьте комментарий и ссылку на ваше удивительное приложение GATSBY/Redux. ? ?