React.js+redux-saga出现TypeError: b is not a function错误求助

错误信息 #

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

相关代码 #

store.js #

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;

index.js #

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();

错误根源：当浏览器未安装Redux开发者工具时，window.devToolsExtension && window.devToolsExtension()会返回undefined，导致compose接收的参数中混入非函数值，破坏了compose生成的增强函数，最终调用时抛出"不是函数"的错误。

推荐两种修复方式：

方式一：使用官方工具包集成开发者工具 #

安装redux-devtools-extension包后，用composeWithDevTools替代手动compose，自动处理工具的存在性：

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';
import { composeWithDevTools } from 'redux-devtools-extension';

const sagaMiddleware = createSagaMiddleware();

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

sagaMiddleware.run(rootSaga);

export default store;

方式二：手动过滤有效增强函数 #

不依赖额外包，手动判断并收集有效的增强函数，确保传入compose的都是函数：

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 enhancers = [applyMiddleware(sagaMiddleware)];
if (typeof window !== 'undefined' && window.devToolsExtension) {
  enhancers.push(window.devToolsExtension());
}

const store = compose(...enhancers)(createStore)(rootReducer);

sagaMiddleware.run(rootSaga);

export default store;

两种方式均可解决当前错误，同时正确集成redux-saga中间件与Redux开发者工具。

内容的提问来源于stack exchange，提问作者Hemantha Wanniarachchi