How to run redux devtools with redux saga?

Question

Trying to run reduxdevtools with redux saga:

Getting this error:

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

This is my jscode:

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

How can I run this devtool with saga? Alternatively what would work otherwise? codepen

Intima

Answer 1

I've used redux-devtools-extension package as described here, redux-devtools-extension documentation.

After adding the package, I've replaced the store definition with this:

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware)
  )
);

Fixed Codepen Link

Stadtholder

Here is the fixed Codepen link. codesandbox.io/s/redux-saga-example-63jj6 – Tannenwald

the library has been moved to npmjs.com/package/@redux-devtools/extension – Jinks

How can I use this with redux toolkit and redux saga? – Stinky

Answer 2

The previous answer (by trkaplan) uses an imported method composeWithDevTools from 'redux-devtools-extension' package. If you don't want to install this package, you may use this code (based on the docs):

      const composeEnhancers =  typeof window === 'object' && window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] ? 
      window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']({ }) : compose;
      const enhancer = composeEnhancers(
        applyMiddleware(thunkMiddleware, sagaMiddleware, /*other middleware*/),
        /* other store enhancers if any */
      );
      const emptyReducer = () => {};
      const store = createStore(emptyReducer, enhancer);

Albertoalberts

Answer 3

This is how you configure your redux, redux-devtool-extension and redux-saga for the real projects..

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';

import rootReducer from '../reducers';
import rootSaga from '../sagas';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    return {
        ...createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware))),
        runSaga: sagaMiddleware.run(rootSaga),
    };
};

export default configureStore;

Teodorateodorico

what is runSaga ? – Fikes

@Fikes The runSaga function allows starting sagas outside the Redux middleware environment. It also allows you to hook up to external input/output, other than store actions. – Teodorateodorico

and where are the enhancers? – Ether

Answer 4

Incase Compose of Redux is used. Then below code is useful. Step 1: Add chrome Redux DevTools extension. step 2: npm install redux-devtools-extension.

    import { composeWithDevTools } from 'redux-devtools-extension';
    const store = createStore(
                  reducer,
                  compose(
                  applyMiddleware(sagaMiddleware),
                  composeWithDevTools(),
                  ),
                  );

Escallop

this looked promising for me, as I wanted to pass the Enhancers, but unfortunately my app doesn't work if I do – Ether