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

Question

How to configuring redux saga with redux store, i've tried this but i get this error which along top "

import React from "react" import { Provider } from "react-redux" 
import { createStore as reduxCreateStore, applyMiddleware } from "redux" 
import createSagaMiddleware from "redux-saga" 
import "regenerator-runtime/runtime" 
import rootReducer from "./reducers" 
import sagas from "./sagas"

const sagaMiddleware = createSagaMiddleware() 
const createStore = () =>  reduxCreateStore(
    rootReducer,
    applyMiddleware(sagaMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()   )

sagaMiddleware.run(sagas);

export default ({ element }) => (   <Provider store={createStore()}>{element}</Provider> )

question from:https://stackoverflow.com/questions/65845984/error-before-running-a-saga-you-must-mount-the-saga-middleware-on-the-store

Answer 1

As the error says, you are calling sagaMiddleware.run before the store is created. On the line above you create a function that eventually creates the store (once it's called in the react component), but that happens only after you try to run the middleware which is too late.

There are two solutions to this problem depending on your needs.

a) Either get rid of the factory and just create the store immediately.

const sagaMiddleware = createSagaMiddleware() 
const store = reduxCreateStore( // notice the missing () =>
    rootReducer,
    applyMiddleware(sagaMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()   )

sagaMiddleware.run(sagas);

export default ({ element }) => (   <Provider store={store}>{element}</Provider> )

b) Move the middleware logic into the create store function

const createStore = () => {
    const sagaMiddleware = createSagaMiddleware() 
    reduxCreateStore(
        rootReducer,
        applyMiddleware(sagaMiddleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
    sagaMiddleware.run(sagas);
    return store;
}

export default ({ element }) => (   <Provider store={createStore()}>{element}</Provider> )

I would recommend the first one unless there is a particular reason why you need the factory instead.