mhaagens / react-mobx-react-router4-boilerplate

React, React-Router 4, MobX and Webpack 2-boilerplate with async routes.
560 stars 137 forks source link

The UI not update when hot-reload #3 #49

Closed njleonzhang closed 7 years ago

njleonzhang commented 7 years ago

@mhaagens I am trying to make my own react starter project, and I really like yours, so use basically same configuration to yours. But Mobx hot-reload in my project. I know this is not your issue, but if possible, would you please help to check my config?

issue desc:

enviroment:

    "mobx": "^3.2.2",
    "mobx-react": "^4.2.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "rfx-core": "^1.5.3"

entry:

.....
import "./stores" // init the store

const store = rehydrate()
ReactDOM.render(
  <AppContainer>
    <Router>
      <Provider store={isProduction ? store : hotRehydrate()}>
        <App />
      </Provider>
    </Router>
  </AppContainer>,
  document.getElementById('app'))

// hot reload config
if (module.hot) {
    module.hot.accept(() => renderApp(App))
}

@withRouter // make react-router work 
@inject('store')
@observer
export default class App extends Component {
  constructor(props) {
    super(props)
    this.store = this.props.store.appState
  }

  componentDidMount() {
    this.store.setDate('2017-11-11')
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={img} className="App-logo" alt="logo" />
          <h2>Welcome to React {this.store.dateStr}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload. {this.store.testVal}
        </p>
        ..........
    )
  }
}

Store:

export default class AppState {
  @observable testVal

  constructor() {
    this.testVal = '123'
  }
}

import { store } from 'rfx-core'

import AppState from './AppState'

export default store.setup({
  appState: AppState,
  ......
})

After updating Store, for example, change this.testVal = '123' to this.testVal = '1234', the log shows Store has changed, but the UI not updated.

image

Here is the sample project, would you please help to check? https://github.com/njleonzhang/my-react-starter

njleonzhang commented 7 years ago

fixed by myself