react-redux - Redux ストア エラー:その場での `store` の変更はサポートしていません

Question

初めてのreact/redux/railsアプリをセットアップしようとしています。私は current_user と gyms の小道具を渡すために react_on_rails gem を使用しています。

コンソールにエラーが表示されることを除いて、これまでのところすべて正常に動作しているようです。

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

グーグルは、レンダーメソッド内でストアを作成しようとすると、これが発生する可能性があるというヒントを与えてくれます。これにより、ストアが再作成されます。ここではその問題は見られません。どこが間違っていますか？

//App.js
import React from 'react';
import { Provider } from 'react-redux';

import configureStore from '../store/gymStore';
import Gym from '../components/Gym';

const App = props => (
  <Provider store={configureStore(props)}>
    <Gym />
  </Provider>
);

export default App;

../store/gymStore.jsx

//the store creation.  
/*
// my original way
import { createStore } from 'redux';
import gymReducer from '../reducers/';

const configureStore = railsProps => createStore(gymReducer, railsProps);
export default configureStore;
*/

/* possible fix: https://github.com/reactjs/react-redux/releases/tag/v2.0.0 */
/* but adding below does not resolve error */

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(railsProps) {
  const store = createStore(rootReducer, railsProps);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers

    module.hot.accept(() => {
      const nextRootReducer = require('../reducers').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

レンダリングされたコンポーネントが必要かどうかはわかりませんが、必要な場合:

//compenents/Gym.jsx
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import LeftMenu from './LeftMenu';

class Gym extends React.Component {
  static propTypes = {
    //name: PropTypes.string.isRequired // this is passed from the Rails view
  };

  /**
   * @param props - Comes from your rails view.
   */
  constructor(props) {
    super(props);

    this.state = {
      current_user: this.props.current_user,
      gyms: JSON.parse(this.props.gyms),
      active_gym: 1, //JSON.parse(this.props.gyms)[0],
      name: 'sean',
      title: 'Gym Overview'
    };
  }

  updateName = name => {
    this.setState({ name });
  };

  isLoggedIn = () => {
    if (this.state.current_user.id != '0') {
      return <span className="text-success"> Logged In!</span>;
    } else {
      return <span className="text-danger"> Must Log In</span>;
    }
  };

  isActive = id => {
    if (this.state.active_gym == id) {
      return 'text-success';
    }
  };

  render() {
    return (
      <div className="content">
        <h2 className="content-header">{this.state.title}</h2>
        {LeftMenu()}
        {this.state.current_user.id != '0' ? <span>Welcome </span> : ''}
        {this.state.current_user.first_name}
        <h3 className="content-header">Your Gyms</h3>
        <ul>
          {this.state.gyms.map((gym, key) => (
            <li key={key} className={this.isActive(gym.id)}>
              {gym.name}
            </li>
          ))}
        </ul>
        {this.isLoggedIn()}
        <hr />
        {/*
        <form>
          <label htmlFor="name">Say hello to:</label>
          <input
            id="name"
            type="text"
            value={this.state.name}
            onChange={e => this.updateName(e.target.value)}
          />
        </form>
        */}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    current_user: state.current_user,
    gyms: state.gyms,
    active_gym: state.active_gym
  };
}

export default connect(mapStateToProps)(Gym);