0

我正在尝试设置我的第一个 react/redux/rails 应用程序。我正在使用 react_on_rails gem 传递我的 current_user 和 gyms 道具。

到目前为止，一切似乎都正常，除了我的控制台显示错误：

<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);
4

0 回答 0