Support Hot Reloading of model

[Chrisigrimm]

How can hot reloading be implemented?
I tried it with creating a new store and render the app new but that doesn't work.
Any ideas? Is there a way to create reducers out of the models? Then i can use the standard function replaceReducer of the store.

renderApp(App, store, reduxHistory);

function renderApp(App: any, store: any, history: any) {
	ReactDOM.render(
        <StoreProvider store={ store}>
            <Router history={ history}>
				<MuiThemeProvider theme={theme}>
					{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
					<CssBaseline />
                    <App />
				</MuiThemeProvider>
			</Router>
		</StoreProvider>,
		document.getElementById('root')
	);
}

// Connect HMR
if ((module as any).hot) {
	(module as any).hot.accept([ './model' ], () => {
		store = createStore(model, {
			devTools: true,
            middleware: [routerMiddleware],
            initialState: store.getState()
        } as EasyPeasyConfig);
	renderApp(App, store, reduxHistory);
	});
}

[ctrlplusb]

Hey @Keyj1n

Thanks for raising this. I think I already have most of the work done for this, but need to do a bit more still.

I would appreciate it if you could create a minimal example repo for me to test against. 👍

[allpro]

I am having an issue with hot reloading right now. All the data in EP models is lost, yet the rest of the store is fine. It's hard to tell if this is related to Easy-Peasy or the convoluted flow currently used. I'm also using a reducerEnhancer to integrate older reducers, which adds to the complexity.

What is the status of hot reloading with EP? Anything you can share would be helpful. One way or another I'll have to find a solution, no matter how hacky!

[ctrlplusb]

This works in easy-peasy@3.0.0-beta.1, via the new store.reconfigure(model) API.

I modified a simple Create React App to test it and appears to work. You can modify the state by interacting with the application then make a code change to the model. You will note that the app is updated by state is maintained. 👍

I introduced the following file structure:

|- src
   |- model
   |  |- index.js
   |
   |- index.js
   |- store.js

src/index.js

Firstly, configure the root file responsible for rendering your app to support hot reloading of the App component.

import React from "react";
import ReactDOM from "react-dom";
import { StoreProvider } from "easy-peasy";
import App from "./App";
import store from "./store";

const render = Component =>
  ReactDOM.render(
    <StoreProvider store={store}>
      <Component />
    </StoreProvider>,
    document.getElementById("root")
  );

render(App);

if (process.env.NODE_ENV === "development") {
  if (module.hot) {
    module.hot.accept("./App", () => {
      const NextApp = require("./App").default;
      render(NextApp);
    });
  }
}

src/store.js

Then configure your store to support hot reloading of the model.

import { createStore } from "easy-peasy";
import model from "./model";

const store = createStore(model);

if (process.env.NODE_ENV === "development") {
  if (module.hot) {
    module.hot.accept("./model", () => {
      store.reconfigure(model);  // 👈 Here is the magic
    });
  }
}

export default store;

[ctrlplusb]

@allpro @Keyj1n 👆

[allpro]

Thanks @ctrlplusb. Will give this a try today.

[ctrlplusb]

Created an example repo and have added to v3 docs

https://github.com/ctrlplusb/easy-peasy-hot-reload

[jamaljsr]

Tested and confirmed working for me. Thanks @ctrlplusb 👍

[lishine]

Thanks for this.
Does somebody has a clue how to do this with Next.js ?

[codemonkeynorth]

Vite version

if (import.meta.hot) {
  import.meta.hot.accept("./model", (newModule) => {
    const newModel = newModule.default
    store.reconfigure(newModel) // 👈 Here is the magic
  })
}