Redux + storybook throws warning about changing store on the fly even with module.hot implemtended

Question

I'm using storybook and I want to add redux as decorator. Whe running storybook, I got warning in console:

<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.

It's my code for config storybook:

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

import React from 'react';
import { configure, storiesOf } from '@storybook/react';
import { Provider as ReduxProvider } from 'react-redux';
import forEach from 'lodash/forEach';
import unset from 'lodash/unset';
import Provider from 'components/Provider';
import initStore from 'utils/initStore';
import messages from '../lang/en.json';

const req = require.context('../components', true, /_stories\.js$/);

const ProviderDecorator = (storyFn) => {
  const TheProvider = Provider(() => storyFn());

  return (
    <ReduxProvider store={initStore()}>
      <TheProvider key={Math.random()} now={1499149917064} locale="en" messages={messages} />
    </ReduxProvider>
  );
}

function loadStories() {
  req.keys().forEach((filename) => {
    const data = req(filename);

    if (data.Component !== undefined && data.name !== undefined && data.stories !== undefined) {
      const Component = data.Component;

      const stories = storiesOf(data.name, module);

      stories.addDecorator(ProviderDecorator);

      let decorator = data.stories.__decorator;

      if (data.stories.__decorator !== undefined) {
        stories.addDecorator((storyFn) => data.stories.__decorator(storyFn()));
      }

      forEach(data.stories, (el, key) => {
        if (key.indexOf('__') !== 0) {
          stories.add(key, () => (
            <Component {...el} />
          ));
        }
      });
    } else {
      console.error(`Missing test data for ${filename}!`)
    }

  });
}

configure(loadStories, module);

and initStore file:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';

import reducers from 'containers/redux/reducers';

export default () => {
  const store = createStore(
    reducers,
    {},
    composeWithDevTools(applyMiddleware(thunkMiddleware), autoRehydrate()),
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../containers/redux/reducers', () => {
      const nextReducers = require('../containers/redux/reducers'); // eslint-disable-line global-require
      store.replaceReducer(nextReducers);
    });
  }

  persistStore(store);

  return store;
};

So as you can see I followed instructions from link in warning. What have I done wrong and how can I remove this warning? I know it won't show on production server, but it's pretty annoying in dev mode. :/

Answer 1

The reason this is happening has to do with the way Storybook hot-loads.

When you change your story, that module is hot-loaded, meaning that the code inside it is executed again.

Since you're using a store creator function and not a store instance from another module, the actual store object that is being passed to ReduxProvider on hot-load is new every time.

However, the React tree that is re-constructed is for the most part identical, meaning that the ReduxProvider instance is re-rendered with new props instead of being re-created.

Essentially, this is changing its store on the fly.

The solve is to make sure that ReduxProvider instance is new, too, on hot-load. This is easily solved by passing it a unique key prop, e.g.:

const ProviderDecorator = (storyFn) => {
  const TheProvider = Provider(() => storyFn());

  return (
    <ReduxProvider key={Math.random()} store={initStore()}>
      <TheProvider key={Math.random()} now={1499149917064} locale="en" messages={messages} />
    </ReduxProvider>
  );
}

From React Keys:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.