redux store Error while creating store after installing redux-saga

Question

I want to use redux-saga in my project and after installing redux-saga when I make changes in store.js file it gives error

Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.

# store.js                     
import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers'
import createSagaMiddleware from 'redux-saga';
import rootSaga from './actions/sagas';


const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;


const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware)
);



const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  enhancer,
  composeWithDevTools(applyMiddleware(...middleware))
);
  


sagaMiddleware.run(rootSaga);
export default store; 

I don't know much about stores. please see if you can help.

Answer 1

You are composing your devtools and middlewares twice there use only one of the two.

const store = createStore(
  rootReducer,
  initialState,
// either this line
  enhancer,
// or this line
  composeWithDevTools(applyMiddleware(...middleware))
);

Also, just FYI: this is a quite outdated style of redux. If you are learning redux right now and follow this approach, you will write a LOT of unneccessary boilerplate. Please follow the official redux tutorials over at the official redux documentation instead of whatever tutorials you are learning from right now.