chore(examples): Add two redux examples (#31928)

Co-authored-by: LekoArts <[email protected]>

Author: graysonhicks

examples/using-redux-w-interaction-code-splitting/README.md

@@ -0,0 +1,35 @@
+# Gatsby Redux Lazy Loading
+
+## Goal
+
+The goal is to show a pattern of _not_ just loading a slice of a Redux store when a component mounts, but _when the user interacts with the site_. In this case, there is an expensive reducer that:
+
+- has a large 3rd party dependency
+- imports a large JSON file and sets it in the store
+
+This is very useful for parts of the store that are:
+
+- not present on every page
+- not present on a page without a certain user action
+
+For less expensive slices of the store, this pattern may be overkill, but for expensive parts it is worth it.
+
+## Why
+
+The reason we have to be especially "careful" with Redux with Gatsby is that Gatsby's default code-splitting will be looking for code that is unique to a certain page and bundle it up, but if it sees code across more than one page, it will end up in the `app` or `commons` bundle and be loaded on every page, whether it is used or not. In this example the large 3rd party dependency and large array of dummy data would otherwise be loaded on every page, over 400kb! [See this article by Ben Robertson on Gatsby code splitting](https://benrobertson.io/notes/gatsby-and-bundle-chunking).
+
+## Pattern
+
+The app works based on the [implementation of the Redux Modules or Reducer Registry pattern found here](https://nicolasgallagher.com/redux-modules-and-code-splitting/) by Nicholas Gallagher.
+
+## Running Locally
+
+```shell
+cd examples/using-redux-w-interaction-code-splitting
+npm install
+npm run start
+```
+
+## Live demo:
+
+[gatsbyreduxcodesplittingexampl.gtsb.io](https://gatsbyreduxcodesplittingexampl.gtsb.io)

examples/using-redux-w-interaction-code-splitting/gatsby-browser.js

@@ -0,0 +1,6 @@
+import * as React from "react"
+import WrapRootElement from "./src/redux/reduxWrapper"
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)

examples/using-redux-w-interaction-code-splitting/gatsby-config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby + Dynamic Redux`,
+    description: `Lazy load slices of your Redux store based on user interaction.`,
+    author: `Grayson Hicks`,
+  },
+  plugins: [
+    `gatsby-plugin-react-helmet`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `gatsby-starter-default`,
+        short_name: `starter`,
+        start_url: `/`,
+        background_color: `#663399`,
+        theme_color: `#663399`,
+        display: `minimal-ui`,
+        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+      },
+    },
+    `gatsby-plugin-perf-budgets`,
+  ],
+}

examples/using-redux-w-interaction-code-splitting/gatsby-node.js

@@ -0,0 +1,11 @@
+exports.onCreateWebpackConfig = ({ actions }) => {
+  // Turn off polyfills for the large library we are importing in dummy.js so build is successful.  Not relevant to overall purpose of the example.
+  actions.setWebpackConfig({
+    resolve: {
+      fallback: {
+        stream: false,
+        http: false,
+      },
+    },
+  })
+}

examples/using-redux-w-interaction-code-splitting/gatsby-ssr.js

@@ -0,0 +1,6 @@
+import * as React from "react"
+import WrapRootElement from "./src/redux/reduxWrapper"
+
+export const wrapRootElement = ({ element }) => (
+  <WrapRootElement element={element} />
+)

examples/using-redux-w-interaction-code-splitting/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "gatsby-starter-default",
+  "private": true,
+  "description": "A simple starter to get up and developing quickly with Gatsby",
+  "version": "0.1.0",
+  "author": "Kyle Mathews <[email protected]>",
+  "dependencies": {
+    "gatsby": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-perf-budgets": "0.0.17",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-transformer-sharp": "next",
+    "node-libs-browser": "^2.2.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-helmet": "^6.1.0",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5"
+  },
+  "devDependencies": {
+    "prettier": "2.2.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "0BSD",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}

examples/using-redux-w-interaction-code-splitting/src/components/header.js

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import PropTypes from "prop-types"
+
+const Header = ({ siteTitle }) => (
+  <header
+    style={{
+      background: `transparent`,
+      marginBottom: `1.45rem`,
+    }}
+  >
+    <div
+      style={{
+        margin: `0 auto`,
+        maxWidth: 960,
+        padding: `1.45rem 1.0875rem`,
+      }}
+    >
+      <h1 style={{ margin: 0 }}>
+        <Link
+          to="/"
+          style={{
+            color: `rebeccapurple`,
+            textDecoration: "underline",
+          }}
+        >
+          {siteTitle}
+        </Link>
+      </h1>
+    </div>
+  </header>
+)
+
+Header.propTypes = {
+  siteTitle: PropTypes.string,
+}
+
+Header.defaultProps = {
+  siteTitle: ``,
+}
+
+export default Header