Hot Module Reloading

[coffeeneer]

With this boilerplate I´ve encountered that changing anything in reducers or sagas often requires a full reload. With the error message that with the react-redux 2.0+ releases changing the store on the fly is not supported.

Now I've been playing around with this and got the reducer hot module reloading working by changing the store creation modules. I've moved the code from App/Redux/CreateStore to App/Redux/Index and changed/added the following:

-------------------------------------------------------------------------------
(above default export function)
-------------------------------------------------------------------------------

const allReducers = {
  github: require('./GithubRedux').reducer,
  login: require('./LoginRedux').reducer,
  search: require('./SearchRedux').reducer
}

-------------------------------------------------------------------------------
(after saga kickoff in the default export function which creates the store)
-------------------------------------------------------------------------------

if (module.hot) {
    module.hot.accept(() => {
        const nextRootReducer = combineReducers(allReducers)
        store.replaceReducer(nextRootReducer)
    })
}

This works with changing the reducers quite nicely. But I noticed the ReduxPersist RehydrationServices.updateReducers(store) function call. Should this also be called after the store is updated with a reducer hmr?

And on the topic of HMR, updating Sagas is not handled by this update method. This can be implemented (see https://stackoverflow.com/questions/37148592/redux-saga-hot-reloading#40783428 for the webpack equivalent) but there's some drawbacks to it which are mentioned briefly in the topic.

ps. I love the work you have done with ignite, the boilerplates and reactotron. They make for an awesome starting point and development toolkit!

[jamonholmgren]

@dodedodo33 Thanks so much for the kind words, and I'm very sorry this issue got missed! This looks really interesting. Do you have any updates to it beyond what you've written here?

[coffeeneer]

@jamonholmgren You're welcome :) Unfortunately I haven't really had the time to build on this or really test it. So far any reducer updates seemed to correctly reload with this change. I know this works well in react with webpack, but webpack also provides a path for which modules are updated. Where react-native does not. So the optimization of checking the path and only updating the reducers when the path equals '/reducers' or something is not possible if I understand correctly. If I have a bit more spare time I'd be happy to work on this feature as it cuts back on necessary full reloads.

[Fr33maan]

@dodedodo33 How did you get the component connected to the state ?
I successfully avoided the crash with this solution but the state is never reconnected to the components...

[Fr33maan]

@skellock @jamonholmgren
I finally succeded in deleting the error and get the state kept between HMR but there is an issue with reducers, they totally break the app.
I've opened an issue on RN repo, opened a question on SO and created a reproductible repo.
Will PR when I'll have solution

facebook/react-native#16148
https://stackoverflow.com/questions/46490306/react-native-redux-hmr-connect
https://github.com/l1br3/ReactNative-Redux-HMR-Broken

[Fr33maan]

@jamonholmgren fixed by https://github.com/infinitered/ignite-ir-boilerplate/pull/146

[coffeeneer]

@L1br3 Sorry for the delayed response.
I'm currently really occupied with other responsibilities, so unfortunately I have not been able to find time for side quests (projects).
Sorry I couldn't be of any help, but nice to see you have found a solution!

[Fr33maan]

@dodedodo33 force to you ! 👍