Автор оригинала: 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. ? ?