TypeError: b is not a function error in React.js with redux-saga

I am working with react application with redux-saga. It gives below run time error.

b is not a function
TypeError: b is not a function
    at http://localhost:3000/static/js/bundle.js:58975:48
    at ./src/redux/store.js (http://localhost:3000/static/js/bundle.js:1029:189)
    at options.factory (http://localhost:3000/static/js/bundle.js:59638:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:59031:33)
    at fn (http://localhost:3000/static/js/bundle.js:59295:21)
    at ./src/index.js (http://localhost:3000/static/js/bundle.js:636:74)
    at options.factory (http://localhost:3000/static/js/bundle.js:59638:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:59031:33)
    at http://localhost:3000/static/js/bundle.js:60284:37
    at http://localhost:3000/static/js/bundle.js:60286:12

this says error in store.js

Below i have attached my Store.js code


import {compose,applyMiddleware} from 'redux'
import rootReducer from './reducers/index'
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas';
import { legacy_createStore as createStore } from 'redux';

const sagaMiddleware=createSagaMiddleware();
const store=compose(
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension && window.devToolsExtension(),
)(createStore)(rootReducer)

sagaMiddleware.run(rootSaga);

export default store;

also it mentioned about index.js therefore i have check both store.js and index.js files. But i couldn't find the error. below i have attached my index.js code.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from '../src/redux/reducers/index';
import store from '../src/redux/store';


const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error("Root element with id 'root' not found in the document.");
}

ReactDOM.render(

  <Provider store={store}>
  <React.StrictMode>
      <App />
  </React.StrictMode>
  </Provider>,
  rootElement
);

reportWebVitals();

I am beginner to redux-saga. can you help to solve this issue?

Solution

The way you are creating the store looks a bit odd. If I am reading your code correctly you are composing the middlewares, then trying to invoke its returned function and pass the createStore function to it... and later still invoke that call's return value and pass your root reducer function.

You should be calling createStore and passing the root reducer and middlewares as arguments. Try the following rewrite.

import {
  legacy_createStore as createStore,
  compose,
  applyMiddleware
} from 'redux';
import rootReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  undefined, // <-- initial state, any preloaded state would go here
  compose(
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension && window.devToolsExtension(),
  ),
);

sagaMiddleware.run(rootSaga);

export default store;

Note that you are using outdated Redux. Modern Redux is written using Redux-Toolkit. It's much less boiler-platey and more succinct.

Example:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

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

sagaMiddleware.run(rootSaga);

export default store;