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?
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 ?
Most helpful comment
For future people checking out this issue, the following code works: