22

I was working on a React & Redux project. The project used to use webpack-dev-middleware and hot middleware to hot reload.

After I added Redux Saga to the project, and added saga middleware to the redux store. It seems that whenever I change the saga codes, the hot reloading will broke and display an error message:

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.

I understand that Saga uses generators and it is time dependent. Is it possible to hot reload the page with Sagas? just like how Redux reducers replace itself during hot reloading.

Thanks!

Kevin He
  • 701
  • 6
  • 16

2 Answers2

39

I'm working on a project with redux and redux-saga (but not react). I implemented the hot reloading of sagas using the sagaMiddleware.run() but you have to handle the module reloading and replace reducers and sagas as indicated in the link you provided (https://github.com/reactjs/react-redux/releases/tag/v2.0.0).

import { createStore } from 'redux';
import rootReducer from '../reducers/index';
import getSagas from '../sagas';

export default function configureStore(initialState) {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(rootReducer, initialState, applyMiddleware(sagaMiddleware));
  let sagaTask = sagaMiddleware.run(function* () {
     yield getSagas()
  })
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
    module.hot.accept('../sagas', () => {
      const getNewSagas = require('../sagas');
      sagaTask.cancel()
      sagaTask.done.then(() => {
        sagaTask = sagaMiddleware.run(function* replacedSaga (action) {
          yield getNewSagas()
        })
      })
    })
  }

  return store;
}

An important thing to notice is the getSagas() function. It returns an array of freshly created generator object of sagas, you cannot have some precreated object in the array from some already running sagas. If you buid this array only in one module, you can use directly a constant array, but if you build it composing sagas from different modules you have to be sure to recreate sagas from all modules, so the better way is that all modules export creating function instead of exporting a fixed saga or array of sagas. For example it could be a function like this:

export default () => [
  takeEvery(SOME_ACTION, someActionSaga),
  takeEvery(OTHER_ACTION, otherActionSaga),
]

Obviously all sagas are restarted from beginning and if you have a complex sagas with internal state you lose the current state.

A very similar approach is to use a dynamic saga in place of calling sagaMidleware.run(), it a very similar solution but you can reload subsets of the sagas and handle them in different ways. For more info see https://gist.github.com/mpolci/f44635dc761955730f8479b271151cf2

mpolci
  • 2,849
  • 1
  • 20
  • 16
  • 1
    Solved my issue. @kevin, you can mark this as the right answer if it has solved your issue. – wrick17 Aug 03 '17 at 06:07
  • @mpolci can you explain more about the getSagas function? I understand that you want to get an array of saga generator objects, but if you have multiple saga files that export listeners, would you recommend importing each one and calling them as a chain? `import getSaga1 from '../saga1` `import getSaga2 from '../saga2` and then in sagaTask `getSaga1() getSaga2()` – mattgabor Feb 26 '18 at 21:55
  • 2
    This worked for me but I had to `sagaTask.toPromise()` instead of `sagaTask.done`. Also, since I exported sagas like this: `export default function* rootSaga() { yield all(arrayOfSagas) }` I had to `const newSagas = require('./sagas').default` and then just `sagaTask = sagaMiddleware.run(newSagas)` – totymedli Jan 25 '20 at 01:17
9

Update for redux-saga package in version 1.0.0 and newer:

Use @mpolci solution and just change

sagaTask.done.then(() => {

to

sagaTask.toPromise().then(() => {

and everything start working same.

See Task documentation

eMko
  • 91
  • 1
  • 4
  • Is this type of answer what StackOverlow's editing option is for? Or maybe that requires more reputation first? – Dawson B Dec 13 '19 at 18:13