reactjs - 在运行 Saga 之前,您必须使用 applyMiddleware 和 redux 工具在 Store 上挂载 Saga 中间件
问题描述
有人可以帮忙吗,
Error: Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware
挂载 sagaMiddleware 仍然在页面上抛出错误使用 saga Middleware
Store Js
将 redux-saga 添加到 Store
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore } from "redux-persist";
import createSagaMiddleware from 'redux-saga'
import {fetchCollectionsStart} from './shop/shop.sagas'
import logger from "redux-logger";
import rootReducer from "./root-reducer";
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
if (process.env.NODE_ENV === "development") {
middlewares.push(logger);
}
const composeEnhancers =
typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
})
: compose;
const enhancer = composeEnhancers(
applyMiddleware(...middlewares,sagaMiddleware)
// other store enhancers if any
);
sagaMiddleware.run(fetchCollectionsStart);
export const store = createStore(rootReducer, enhancer);
export const persistor = persistStore(store);
创建此 saga 以在安装组件后获取集合
Sagas.js
import {takeEvery} from 'redux-saga/effects';
import ShopActionTypes from './shop.types';
export function* fetchCollectionsAsync(){
yield console.log('Good');
}
export function* fetchCollectionsStart(){
yield takeEvery(ShopActionTypes.FETCH_COLLECTIONS_START,
fetchCollectionsAsync );
}
解决方案
确保你在sagaMiddleware.run(fetchCollectionsStart);
后面跑createStore
const { useState, useEffect } = React;
const { bindActionCreators, combineReducers, createStore, applyMiddleware, compose } = Redux;
const { connect, Provider } = ReactRedux;
const createSagaMiddleware = ReduxSaga.default;
const { takeEvery } = ReduxSagaEffects;
const sagaMiddleware = createSagaMiddleware();
const reducer = (state = {}, action) => {
return state;
}
const enhancer = compose(
applyMiddleware(sagaMiddleware)
);
const reducers = combineReducers({
reducer
})
const store = createStore(
reducers,
enhancer
);
function* fetchCollectionsAsync(){
yield console.log('Good');
}
function* fetchCollectionsStart(){
yield takeEvery('FETCH_COLLECTIONS_START',
fetchCollectionsAsync );
}
sagaMiddleware.run(fetchCollectionsStart);
const action = () => ({
type: 'FETCH_COLLECTIONS_START'
})
const mapStateToProps = state => ({
})
const mapDispatchToProps = ({
action
})
const _App = ({action}) => {
useEffect(() => {
action();
}, [])
return <div>
</div>
}
const App = connect(mapStateToProps, mapDispatchToProps)(_App)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@latest/dist/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.1.3/redux-saga.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.1.3/redux-saga-effects.umd.js"></script>
<div id="root"></div>
推荐阅读
- python-3.x - Python pygame混音器音乐检测是否结束
- linux - 如何使用 perf(或任何其他工具)找出应用程序函数的执行时间
- cherrypy - cherrypy 页面处理程序返回包含字符串和字节对象的组合响应
- javascript - Javascript对角线排序矩阵
- reactjs - React:不要根据子组件状态渲染菜单
- html - 减小内容宽度,以便下一列内容可以显示在它旁边
- mysql - 如何在 SQL 中创建 2 路聚合/透视?
- git - 作业返回“主机密钥验证失败”。当我在 gitlab-ci 上运行 ssh
- node.js - NodeJS:在同一个项目中加载 ES 模块和原生插件
- python - 如何在不丢失值的情况下将 json 解析为 pandas 数据框?