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

Question

我正在使用 redux-saga 来处理 React 应用程序。它给出以下运行时错误。

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

中存在错误

下面我附上了我的

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，因此我检查了store.js 和index.js 文件。但我找不到错误。下面我附上了我的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-saga 的初学者。你能帮忙解决这个问题吗？

Answer 1

您创建商店的方式看起来有点奇怪。如果我正确地阅读了您的代码，您正在编写中间件，然后尝试调用其返回的函数并将

createStore

函数传递给它...然后仍然调用that调用的返回值并传递您的根减速功能。

您应该调用

createStore

并将根减速器和中间件作为参数传递。尝试以下重写。

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;

请注意，您正在使用过时的 Redux。现代 Redux 是使用 Redux-Toolkit 编写的。它不再那么繁琐，也更加简洁。

示例：

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;