无法从我的创建反应应用程序中的'redux-saga'导入创建Saga中间件

Question

我的create-rect应用程序中有以下导入：

import createSagaMiddleware from 'redux-saga';

问题是我的系统无法导入createSagaMiddleware。

我正在运行以下版本：节点12.13.0npm 6.12.1

我的包.json看起来像这样：

{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^7.1.0",
"node-sass": "^4.12.0",
"npm": "^6.12.1",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.1.2",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.1",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"styled-components": "^4.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

我的IDE说(Intellij IDEA(说它"无法解析符号"createSagaMiddleware"。我看到的实际错误消息是

Error: Actions must be plain objects. Use custom middleware for async actions

它被扔到

componentDidMount() {
const {fetchCollectionsStart} = this.props;
fetchCollectionsStart();
};

->

const mapDispatchToProps = (dispatch) => ({
fetchCollectionsStart: () => dispatch(fetchCollectionsStart())
});
export default connect(
null,
mapDispatchToProps
)(ShopPage);

fetchCollectionsStart操作如下所示：

import {takeEvery} from 'redux-saga/effects';
import ShopActionTypes from "./shop.types";
export function* fetchCollectionsAsync() {
yield console.log('I am fired');
}
export function* fetchCollectionsStart() {
yield takeEvery(
ShopActionTypes.FETCH_COLLECTIONS_START,
fetchCollectionsAsync
);
}

我的redux商店看起来是这样的：

import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import logger from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
import {fetchCollectionsStart} from "./shop/shop.sagas";
import rootReducer from './root-reducer';
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
if (process.env.NODE_ENV === 'development') {
middlewares.push(logger);
}
export const store = createStore(rootReducer, applyMiddleware(...middlewares));
sagaMiddleware.run(fetchCollectionsStart);
export const persistor = persistStore(store);
export default { store, persistStore };

我看到有人在https://github.com/redux-saga/redux-saga/issues/1967.然而，这个答案并不能解决这个问题。

有什么想法吗？

感谢

Answer 1

正如错误所说，操作必须是普通对象。显然，你是在发布一个传奇故事，而不是一个动作。

将mapDispatchToProps代码块替换为：

const mapDispatchToProps = (dispatch) => ({
fetchCollectionsStart: () => {
dispatch({ type: ShopActionTypes.FETCH_COLLECTIONS_START });
},
});