Redux Saga hot reloading
Asked Answered
T

2

24

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!

Tuyere answered 10/5, 2016 at 20:41 Comment(1)
See discussion github.com/yelouafi/redux-saga/issues/22#issuecomment-218522365Mariannamarianne
K
43

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

Kowtko answered 24/11, 2016 at 10:8 Comment(3)
Solved my issue. @kevin, you can mark this as the right answer if it has solved your issue.Lavenialaver
@Kowtko 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()Cataplexy
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)Rosado
N
13

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

Newsom answered 5/3, 2019 at 11:15 Comment(1)
Is this type of answer what StackOverlow's editing option is for? Or maybe that requires more reputation first?Splat

© 2022 - 2024 — McMap. All rights reserved.