[1.0] Redux example (#1081)

* Fixes 0-index issue with link preloader as per #988 * Allowing for disabled sourcemaps * Fix bad logic * Adds redux example * Ignores children in prop type validation * Rolls back to older canary to alleviate 404 issues * Example title metadata * Separate createStore * First pass at wrapping server render body * Moves api implementation into gatsby-ssr.js * Updates metadata
gatsbyjs · Jun 7, 2017 · 8fdca0b · 8fdca0b
1 parent 4645524
commit 8fdca0b
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -62,6 +62,12 @@
         "exports": "always-multiline",
         "functions": "ignore"
       }
+    ],
+    "react/prop-types": [
+      "error",
+      {
+        "ignore": ["children"]
+      }
     ]
   }
 }
diff --git a/examples/redux/README.md b/examples/redux/README.md
@@ -0,0 +1,5 @@
+# Redux
+
+https://redux.gatsbyjs.org
+
+Gatsby example site that shows use of redux.
diff --git a/examples/redux/gatsby-browser.js b/examples/redux/gatsby-browser.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { Provider } from 'react-redux'
+
+import createStore from './src/state/createStore'
+
+exports.replaceRouterComponent = ({ history }) => {
+    const store = createStore()
+
+    const ConnectedRouterWrapper = ({ children }) => (
+        <Provider store={store}>
+            <Router history={history}>{children}</Router>
+        </Provider>
+    )
+
+    return ConnectedRouterWrapper
+}
diff --git a/examples/redux/gatsby-config.js b/examples/redux/gatsby-config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Redux`,
+  },
+}
diff --git a/examples/redux/gatsby-ssr.js b/examples/redux/gatsby-ssr.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { Provider } from 'react-redux'
+
+import createStore from './src/state/createStore'
+
+exports.replaceServerBodyRender = ({ component: body }) => {
+
+    const store = createStore()
+
+    const ConnectedBody = () => (
+        <Provider store={store}>
+            {body}
+        </Provider>
+    )
+
+    return {
+        body: renderToString(<ConnectedBody/>),
+    }
+}
diff --git a/examples/redux/package.json b/examples/redux/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "gatsby-example-redux",
+  "private": true,
+  "description": "Gatsby example site that shows use of redux.",
+  "version": "1.0.0",
+  "author": "Scotty Eckenthal <scott.eckenthal@gmail.com>",
+  "dependencies": {
+    "gatsby": "1.0.0-alpha15-alpha.330d917d",
+    "gatsby-link": "1.0.0-alpha15-alpha.330d917d",
+    "lodash": "^4.16.4",
+    "react-redux": "5.0.5",
+    "react-router-redux": "4.0.8",
+    "redux": "3.6.0",
+    "slash": "^1.0.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}
diff --git a/examples/redux/src/html.js b/examples/redux/src/html.js
@@ -0,0 +1,33 @@
+import React from "react"
+
+module.exports = React.createClass({
+  render() {
+    return (
+      <html op="news" lang="en">
+        <head>
+          {this.props.headComponents}
+
+          <meta name="referrer" content="origin" />
+          <meta charSet="utf-8" />
+          <meta
+            name="Gatsby example site showing use with redux"
+            content="Gatsby example site showing use with redux"
+          />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Gatsby - Redux</title>
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  },
+})
diff --git a/examples/redux/src/layouts/index.js b/examples/redux/src/layouts/index.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'gatsby-link'
+import { connect } from 'react-redux'
+
+const Counter = ({ count, increment }) => (
+  <div>
+    <p>Count: {count}</p>
+    <button onClick={increment}>Increment</button>
+  </div>
+)
+
+Counter.propTypes = {
+  count: PropTypes.number.isRequired,
+  increment: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = ({ count }) => {
+  return { count }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return { increment: () => dispatch({ type: `INCREMENT` }) }
+}
+
+const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter)
+
+class DefaultLayout extends React.Component {
+  render() {
+    return (
+      <div>
+        <Link to="/">
+          <h3>
+            Redux example
+          </h3>
+        </Link>
+        <ConnectedCounter/>
+        <ul>
+          <li><Link to="/a/">a</Link></li>
+          <li><Link to="/b/">b</Link></li>
+          <li><Link to="/c/">c</Link></li>
+        </ul>
+        {this.props.children()}
+      </div>
+    )
+  }
+}
+
+export default DefaultLayout
diff --git a/examples/redux/src/pages/a.js b/examples/redux/src/pages/a.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+const A = () => <p>A</p>
+
+export default A
diff --git a/examples/redux/src/pages/b.js b/examples/redux/src/pages/b.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+const B = () => <p>B</p>
+
+export default B
diff --git a/examples/redux/src/pages/c.js b/examples/redux/src/pages/c.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+const C = () => <p>C</p>
+
+export default C
diff --git a/examples/redux/src/pages/index.js b/examples/redux/src/pages/index.js
@@ -0,0 +1,5 @@
+import React from "react"
+
+const Home = () => <p>Home</p>
+
+export default Home
diff --git a/examples/redux/src/state/createStore.js b/examples/redux/src/state/createStore.js
@@ -0,0 +1,15 @@
+import { createStore as reduxCreateStore } from 'redux'
+
+const reducer = (state, action) => {
+    if (action.type === `INCREMENT`) {
+        return Object.assign({}, state, {
+            count: state.count + 1,
+        })
+    }
+    return state
+}
+
+const initialState = { count: 0 }
+
+const createStore = () => reduxCreateStore(reducer, initialState)
+export default createStore