Why the special entry point?

[justin808]

Could you explain these two bullets a bit. This strategy needs to be a bit different with many entry points. Should React on Rails support this wrapping?

• wrap elements in AppContainer from react-hot-loader
• create a render function with reactDOM and use it for initial rendering and in module.hot.accept

https://github.com/retroalgic/react-on-rails-hot-minimal/blob/master/client/src/entry.js#L45

  if (module.hot) {
    module.hot.accept("components/Base", () => { renderApp(Base) })
    module.hot.accept("reducer", () => {
      appStore.replaceReducer(reducer)
    })
  }

[mongjong59]

@justin808 I just made a change (move Provider and ConnectedRouter to Base)

The setup up should be similar with any entry point. I don't really think any magic from React on Rails side would make things simpler. I assume that way people will have to pass special options and arguments around even on Rails side while we are able to simply handle all things within the client code. So I think it's unnecessary React on Rails need to do any extra wrapping with this. Some documentation on this would be helpful enough.

[mongjong59]

The module.hot.accept magic is actually removed intentionally by maintainer of redux and react-hot-loader so it can be called in an appropriate place to avoid problems in some special cases (I don't know whether such case exists when using React on Rails, but I'd prefer no magic)
reduxjs/redux#667

[ezmiller]

@retroalgic: I'm a bit curious about this as well. Looking at your entry.js, you have a stateless functional component that doesn't seem to return any JSX:

const App = (props, railsContext, domNodeId) => {
  const store = ReactOnRails.getStore("store")
  const renderApp = (Component) => {
    const element = (
      <AppContainer errorReporter={consoleErrorReporter}>
        <Component {...{ store, history }} />
      </AppContainer>
    )
    render(element, document.getElementById(domNodeId))
  }
  renderApp(Base)
  if (module.hot) {
    module.hot.accept(["reducer", "components/Base"], () => {
      store.replaceReducer(reducer)
      renderApp(Base)
    })
  }
}

Instead it calls ReactDom.render. I've never seen the render function called inside a component's render function. Can you explain how/why this works?

[mongjong59]

@ezmiller Starting from 3, React Hot Loader doesn't hide the HMR API any more, which is to say, you should at least use ReactDOM.render explicitly with if (module.hot) { module.hot.accept(...) } instead of just returning JSX (the old way).

As for the renderApp function, I wrote it to dry the code. The App here is a renderer function, with which I can reuse renderApp.

You can fork the rep and try to do it differently. Any suggestion is welcome.