gatsby_如何开始使用Gatsby 2和Redux

gatsby

by Carl-Johan Kihl

卡尔·约翰·基尔(Carl-Johan Kihl)

如何开始使用Gatsby 2和Redux (How to get started with Gatsby 2 and Redux)

Gatsby + Redux is a powerful combination when building static web-apps with dynamic features. With Gatsby 2, it has never been easier to get up and running. Today, I’m going to guide you through the steps needed.

当构建具有动态功能的静态网络应用程序时，Gatsby + Redux是一种强大的组合。 使用Gatsby 2，就可以轻松启动和运行它。 今天，我将指导您完成所需的步骤。

Not a big fan of reading? ? Head over to the Redux starter right away:https://github.com/caki0915/gatsby-redux-test/or use the Gatsby CLI:

不喜欢读书吗？ ？ 立即前往Redux启动器：h ttps：//github.com/caki0915/gatsby-redux-test/或使用Gatsby CLI：

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

什么是盖茨比？ (What is Gatsby?)

Gatsby is one of the most popular static site generators out there. Preconfigured with Webpack, React and GraphQL, it gives you a great head-start when building web-apps. It also comes with a rich eco-system of plugins that makes it easy to connect to a variety of data sources. Read more about Gatsby on their website.

盖茨比是目前最受欢迎的静态网站生成器之一。 预先配置了Webpack，React和GraphQL，它在构建Web应用程序时为您提供了一个很好的起点。 它还带有丰富的插件生态系统，可轻松连接各种数据源。 在其网站上阅读有关盖茨比的更多信息。

什么是Redux？ (What is Redux?)

Redux is a state container often used together with React apps. This article will assume that you already know how Redux works. If you’re new to Redux or need a recap, you’ll find more information on their website.

Redux是一个状态容器，经常与React应用程序一起使用。 本文将假定您已经知道Redux的工作原理。 如果您不熟悉Redux或需要回顾，可以在其网站上找到更多信息 。

? Let’s go! ?

？ 我们走吧！ ？

Start by creating a new Gatsby project. In the terminal, run: (Replace gatsby-redux-test witha name of your choosing)

首先创建一个新的Gatsby项目。 在终端，运行：(请 以 你选择的名称 盖茨比-终极版测试 )

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

Next step is to install redux and react-redux packages from NPM.

下一步是从NPM安装redux和react-redux软件包。

npm install --save redux react-redux

Ok great, let’s add a state!

好的，让我们添加一个状态！

Create a new folder called state inside of your src folder and create a file app.js. For the sake of this tutorial, we’re going to add a simple feature that lets you toggle a variable “darkMode” on and off.

在src文件夹中创建一个名为state的新文件夹，并创建一个文件app.js 为了本教程的缘故，我们将添加一个简单的功能，使您可以打开和关闭变量“ darkMode” 。

First, add the initial state:

首先，添加初始状态：

const initialState = {
  isDarkMode: false,
};

Add the action creator (to toggle darkMode on and off):

添加动作创建者(以打开和关闭darkMode )：

const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';

export const toggleDarkMode = isDarkMode => ({
  type: TOGGLE_DARKMODE, isDarkMode
});

Add the reducer:

添加减速器：

export default (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_DARKMODE:
      return { ...state, isDarkMode: action.isDarkMode };
    default:
      return state;
  }
};

Ok great! Now, let’s add the root-reducer. Create a new file index.js inside the state folder.

好的太棒了！ 现在，让我们添加根减少器。 在state文件夹中创建一个新文件index.js 。

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

export default combineReducers({ app });

Now we going to create a Store and Provider. Create a new file ReduxWrapper.js in the state folder. This component is going to wrap our root-component in Gatsby.

现在，我们将创建一个商店和提供者。 在state文件夹中创建一个新文件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 }) => (
  <Provider store={createStore()}>{element}</Provider>
);

Gatsby will render our app both on the server and in the browser, and lucky for us Gatsby has a very flexible API that lets us hook into the rendering. ? We can implement the hooks from two files: gatsby-browser.js and gatsby-ssr.js.

Gatsby可以在服务器和浏览器上渲染我们的应用程序，这对我们来说是幸运的，Gatsby具有非常灵活的API，可以让我们挂接到渲染中。 ？ 我们可以从两个文件实现钩子： gatsby-browser.js和gatsby-ssr.js 。

The hook we are interested in is called wrapRootElement and lets you wrap your app with a custom element. Exactly what we need for our Redux Provider. ? You can read more about wrapRootElement in the documentation.

我们感兴趣的钩子称为wrapRootElement ，它使您可以使用自定义元素包装应用程序。 正是我们Redux Provider需要的。 ？ 您可以在文档中阅读有关wrapRootElement的更多信息。

Since we want to export our ReduxWrapper as wrapRootElement from both gatsby-browser.js and gatsby-ssr.js, add this line to both files:

因为我们希望我们的ReduxWrapper从两个出口作为wrapRootElement gatsby-browser.js和gatsby-ssr.js ，加入这行到这两个文件：

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

Ok Done. Gatsby and Redux are now working together! ? Now we only need a way to test it.

OK完成。 Gatsby和Redux现在正在合作！ ？ 现在我们只需要一种测试方法。

Let’s go for the easiest possible way I can think of: A button on the start page where one can toggle darkMode on and off. When darkMode is on, the button will be dark with white text.

让我们以最简单的方式去思考：开始页面上的一个按钮，可以在该按钮上打开和关闭darkMode 。 启用darkMode时，该按钮将为深色，带有白色文本。

In the terminal run:

在终端运行：

npm run develop

And… see the dark theme in action!

并且…看到黑暗的主题在行动！

Ok, maybe that wasn’t so impressive, but the example does its job and I’m sure you will find a much better application for Redux in your Gatsby-app. ?

好的，也许这并不是那么令人印象深刻，但是该示例确实发挥了作用，我相信您会在Gatsby-app中找到一个更好的Redux应用程序。 ？

摘要 (Summary)

Gatsby + Redux is a powerful combination if you want to build static web-apps with dynamic features. I use it for my projects as well. If you find this article useful, please add a comment and a link to your awesome Gatsby/Redux-app. ? ?

如果您想构建具有动态功能的静态网络应用，则Gatsby + Redux是一种强大的组合。 我也将其用于我的项目 。 如果您觉得这篇文章很有用，请在您的超赞Gatsby / Redux-app中添加评论和链接。 ？ ？

翻译自: https://www.freecodecamp.org/news/how-to-get-started-with-gatsby-2-and-redux-ae1c543571ca/

gatsby