我需要在我的redux应用程序中使用商店增强器(来自qazxsw poi的Redux Firebase)。这个增强器调度一个动作,它看起来或多或少像这样(非常简化):
我希望saga听取所有动作和console.log它们,但它不会捕获增强器调度的“DUMMY_ACTION”,因为它是在saga开始侦听之前调度的(const reactReduxFirebase = (next) => {
return (reducer, initialState, middleware) => {
const store = next(reducer, initialState, middleware);
store.dispatch({
type: 'DUMMY_ACTION'
});
return store;
}
}
// usage
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
const store = createStore(
reducer,
initialState,
compose(
applyMiddleware(...middleware),
reactReduxFirebase
)
);
sagaMiddleware.run(sagas);
// sagas.js
function* handle(action) {
console.log(action);
}
function* saga() {
yield takeEvery('*', handle);
}
export default saga;
)。从redux-saga文档来看,似乎必须在applyMiddleware之后运行saga,所以我无法在增强器之前运行saga。有什么方法可以使它工作,所以传奇也将从增强器中捕获一个动作?
试试这个传奇
sagaMiddleware.run(sagas);
只是为了看它是否有效然后你可以尝试移动到takeEvery,我确实遇到了问题,并创建特定于saga工作的句柄
基于function* log(action) {
while (true) {
yield take('*');
console.log(action);
}
}
export default function* root() {
yield all([call(log)]);
}
的解决方案:
applyMiddlware
日志:
import createSagaMiddleware from 'redux-saga';
import { takeEvery } from 'redux-saga/effects';
import { createStore, compose } from 'redux';
import {
reducer
} from '../reducers';
function sagaPreinitMiddleware(saga) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, preloadedState, enhancer);
let dispatch = store.dispatch;
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
};
dispatch = compose(sagaMiddleware(middlewareAPI))(store.dispatch);
sagaMiddleware.run(saga); // run the saga
return {
...store,
dispatch
};
};
}
const reactReduxFirebase = (next) => {
return (reducer, initialState, middleware) => {
const store = next(reducer, initialState, middleware);
store.dispatch({
type: 'DUMMY_ACTION'
});
setTimeout(store.dispatch({
type: 'DUMMY_ACTION_1'
}), 100);
return store;
};
};
// usage
const middleware = [];
const store = createStore(
reducer,
0,
compose(
reactReduxFirebase,
sagaPreinitMiddleware(sagas)
)
);
// sagas.js
function* handle(action) {
console.log(action);
}
function* sagas() {
yield takeEvery('*', handle);
}