Gatsby 2 및 Redux를 시작하는 방법

Gatsby + Redux는 동적 기능이있는 정적 웹 앱을 빌드 할 때 강력한 조합입니다. Gatsby 2를 사용하면 시작 및 실행이 그 어느 때보 다 쉬워졌습니다. 오늘은 필요한 단계를 안내해 드리겠습니다.

독서를 좋아하지 않습니까? ? Redux 스타터로 바로 이동하십시오.

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

또는 Gatsby CLI를 사용하십시오.

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

개츠비는 무엇입니까?

Gatsby는 가장 인기있는 정적 사이트 생성기 중 하나입니다. Webpack, React 및 GraphQL로 사전 구성되어 웹 앱을 빌드 할 때 훌륭한 출발점을 제공합니다. 또한 다양한 데이터 소스에 쉽게 연결할 수있는 풍부한 플러그인 에코 시스템이 함께 제공됩니다. 웹 사이트에서 Gatsby에 대해 자세히 알아보십시오.

Redux는 무엇입니까?

Redux는 React 앱과 함께 자주 사용되는 상태 컨테이너입니다. 이 기사에서는 Redux가 어떻게 작동하는지 이미 알고 있다고 가정합니다. Redux를 처음 사용하거나 요약이 필요하면 웹 사이트에서 자세한 정보를 찾을 수 있습니다.

? 가자! ?

새로운 Gatsby 프로젝트를 생성하여 시작하십시오. 터미널에서 다음을 실행합니다. ( gatsby-redux-test선택한 이름으로 바꿉니다 )

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

다음 단계는 NPM에서 설치 redux하고 react-redux패키지하는 것입니다.

npm install --save redux react-redux

좋습니다. 상태를 추가하겠습니다.

폴더 state안에 라는 새 폴더를 src만들고 파일을 만듭니다 app.js. 이 튜토리얼을 위해 변수“ darkMode” 를 켜고 끌 수있는 간단한 기능을 추가 할 것 입니다.

먼저 초기 상태를 추가합니다.

const initialState = { isDarkMode: false, };

액션 생성자를 추가합니다 ( darkMode 를 켜고 끄려면 ) :

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

큰 확인! 이제 root-reducer를 추가하겠습니다. 폴더 index.js안에 새 파일을 만듭니다 state.

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

이제 Store 및 Provider를 생성하겠습니다. 폴더에 새 파일 ReduxWrapper.js을 만듭니다 state. 이 컴포넌트는 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.jsgatsby-ssr.js.

우리가 관심있는 후크는 wrapRootElement 라고 하며 사용자 지정 요소로 앱을 래핑 할 수 있습니다. Redux Provider에 정확히 필요한 것. ? 문서에서 wrapRootElement 에 대해 자세히 읽을 수 있습니다 .

우리는 우리의 내보낼 이후 ReduxWrapper을 같이 wrapRootElement 모두에서 gatsby-browser.js하고 gatsby-ssr.js, 두 파일에 다음 행을 추가합니다 :

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

좋아됐다. Gatsby와 Redux는 이제 함께 일하고 있습니다! ? 이제 우리는 그것을 테스트 할 방법 만 필요합니다.

내가 생각할 수있는 가장 쉬운 방법을 찾아 보자. 시작 페이지의 버튼으로 darkMode 를 켜고 끌 수있다. darkMode 가 켜져 있으면 버튼이 흰색 텍스트로 어두워집니다.

터미널에서 다음을 실행하십시오.

npm run develop

그리고 ... 작동중인 어두운 테마를 확인하세요!

좋아, 그다지 인상적이지 않았을 수도 있지만 예제가 제대로 작동하며 Gatsby-app에서 Redux를위한 훨씬 더 나은 애플리케이션을 찾을 수있을 것입니다. ?

요약

Gatsby + Redux는 동적 기능이있는 정적 웹 앱을 구축하려는 경우 강력한 조합입니다. 내 프로젝트에도 사용합니다. 이 기사가 유용하다고 생각되면 멋진 Gatsby / Redux 앱에 대한 의견과 링크를 추가하십시오. ? ?