[英]Cannot import createSagaMiddleware from 'redux-saga' in my create-react-app
我的 create-react-app 中有以下導入:
import createSagaMiddleware from 'redux-saga';
問題是我的系統無法導入 createSagaMiddleware。
我正在運行版本:節點 12.13.0 npm 6.12.1
我的 package.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看到了類似的問題。 然而,這個答案並不能在這里解決。
有任何想法嗎?
謝謝
正如錯誤所說,動作必須是普通對象。 顯然,您正在調度一個傳奇而不是一個動作。
將您的mapDispatchToProps
代碼塊替換為:
const mapDispatchToProps = (dispatch) => ({
fetchCollectionsStart: () => {
dispatch({ type: ShopActionTypes.FETCH_COLLECTIONS_START });
},
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.