Gatsby: Error when hot reloading with Redux

[Mrtenz]

Description

When hot reloading with Redux installed, react-redux will throw this error:

<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

Steps to reproduce

1. Download the using-redux example
2. Install dependencies
3. Run npm run develop
4. Open it in your browser
5. Change something in src/layouts/index.js

Environment

Gatsby version: 2.0.0-beta.2 (applies to v1 as well)
Node version: 8.11.2
Npm version: 5.6.0

File contents (if changed)

(Copied from examples/using-redux)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Redux`,
  },
}

package.json:

{
  "name": "gatsby-example-redux",
  "private": true,
  "description": "Gatsby example site that shows use of redux.",
  "version": "1.0.0",
  "author": "Scotty Eckenthal <[email protected]>",
  "dependencies": {
    "gatsby": "next",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-redux": "5.0.5",
    "redux": "3.6.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  }
}

gatsby-node.js: N/A
gatsby-browser.js:

import React from 'react'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'

import createStore from './src/state/createStore'

export const replaceRouterComponent = ({ history }) => {
    const store = createStore()

    const ConnectedRouterWrapper = ({ children }) => (
        <Provider store={store}>
            <Router history={history}>{children}</Router>
        </Provider>
    )

    return ConnectedRouterWrapper
}

gatsby-ssr.js:

import React from 'react'
import { Provider } from 'react-redux'
import { renderToString } from 'react-dom/server'

import createStore from './src/state/createStore'

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
    const store = createStore()

    const ConnectedBody = () => (
        <Provider store={store}>
            {bodyComponent}
        </Provider>
    )
    replaceBodyHTMLString(renderToString(<ConnectedBody/>))
}

[m-allanson]

It looks like there are instructions on how to make this work at https://github.com/reduxjs/react-redux/releases/tag/v2.0.0.

If anyone wants to investigate this and update the using-redux example to work with hot reloading, that'd be 👍 👍 👍.

[MichaelZoerner]

I couldn't reproduce the error with the current version of using-redux. I followed steps 1-4. src/layouts/index.js doesn't exist in v2. Instead I changed files in the folders pages and components. No error, hot reloading worked.

Node: 10.4.1
Yarn: 1.7.0
npm: 6.1.0
gatsby: 2.0.0-beta.2

[Mrtenz]

@MichaelZoerner Sorry, I think I was looking at the using-redux example of v1. I am able to reproduce this issue in the of v2 though, by changing something in one of the pages files. Hot reloading works, but react-redux does throw an error.

[MichaelZoerner]

Note to self: When looking for errors, open console. :)

Should be fixed by #6150