Redux-toolkit: configureStore fail with redux-saga: you must mount the Saga middleware on the Store using applyMiddleware

Created on 17 Dec 2019  路  4Comments  路  Source: reduxjs/redux-toolkit

I'm configuring my store with redux-saga but I'm getting the next error:

Error: Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware

the configuration of the store is:

import {applyMiddleware} from 'redux';

import createSagaMiddleware from 'redux-saga';
import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import {rootReducer} from './ducks';
import {sagas} from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = () => {
  return configureStore({
    reducer: rootReducer,
    middleware: [...getDefaultMiddleware(),  sagaMiddleware],
  });
};

sagaMiddleware.run(sagas);

export {store};

And here the library versions:

"@reduxjs/toolkit": "^1.1.0",
"redux": "^4.0.4",
"redux-saga": "^1.1.3"

Are something wrong with my configuration?

Most helpful comment

For future people checking out this issue, the following code works:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

import reducer from './root-reducer.js';
import saga from './root-saga.js';

const devMode = process.env.NODE_ENV === 'development';

const sagaMiddleware = createSagaMiddleware();

const middleware = [...getDefaultMiddleware({ thunk: false }), sagaMiddleware];

if (devMode) {
  middleware.push(logger);
}

export default (preloadedState = reducer()) => {
  const store = configureStore({
    reducer,
    devTools: devMode,
    middleware,
    preloadedState,
  });
  sagaMiddleware.run(saga);
  return store;
};

All 4 comments

Hmm. I haven't actually tried to set up redux-saga with RTK myself, but that _seems_ valid.

FWIW, here's a search of Github showing a few other places where folks are doing this:

https://github.com/search?q=configurestore+reduxjs+toolkit+redux-saga&type=Code

Nevermind I found the problem: sagaMiddleware.run(sagas) run before than store()

For future people checking out this issue, the following code works:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';

import reducer from './root-reducer.js';
import saga from './root-saga.js';

const devMode = process.env.NODE_ENV === 'development';

const sagaMiddleware = createSagaMiddleware();

const middleware = [...getDefaultMiddleware({ thunk: false }), sagaMiddleware];

if (devMode) {
  middleware.push(logger);
}

export default (preloadedState = reducer()) => {
  const store = configureStore({
    reducer,
    devTools: devMode,
    middleware,
    preloadedState,
  });
  sagaMiddleware.run(saga);
  return store;
};

How to add this to src/index.js ?

Was this page helpful?
0 / 5 - 0 ratings