[英]Redux saga never runs
我正在嘗試在我的應用程序中配置redux-saga
v1.1.3。
我在下面的配置中使用了自述文件。
在我的項目中:
npm i redux-saga@1.1.3 --save
我創建了rootSaga.js
如下:
import { all } from 'redux-saga/effects'
export default (customSagas) => function* rootSaga() {
yield all([
...customSagas,
])
}
我將
rootSaga.js
變成了 function,因為 rootSaga 是我應用程序的核心,我需要能夠向我的應用程序添加更多 customSaga。
這是我更新的configureStore.js
:
import { routerMiddleware } from 'connected-react-router';
import {
createStore,
applyMiddleware,
compose,
} from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
+ import createSagaMiddleware from 'redux-saga';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import { augmentStore } from '@nfen/redux-reducer-injector';
import storage from './storage';
import combineAppReducers from '../reducers';
+ import rootSagas from '../sagas';
function setupCreateReducer(customReducers = {}, reducerConfig) {
return function createReducer() {
return combineAppReducers({
...customReducers,
}, reducerConfig);
};
}
export default function configureStore(customReducers, customSagas, initialState = {}, persistConfig = {}, reducerConfig = {}) {
const runtimePersistConfig = {
key: 'root',
stateReconciler: autoMergeLevel2,
storage,
...persistConfig,
whitelist: [
'preferences',
...(persistConfig.whitelist || []),
],
};
let composeEnhancers = compose;
const reduxSagaMonitorOptions = {};
/* istanbul ignore next */
if (__DEV__ && typeof window === 'object') { // eslint-disable-line no-undef
/* eslint-disable no-underscore-dangle */
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
}
/* eslint-enable */
}
+ const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
- const middlewares = combineAppMiddlewares([], reducerConfig.history);
+ const middlewares = combineAppMiddlewares([sagaMiddleware], reducerConfig.history);
- const middlewares = [routerMiddleware(reducerConfig.history)];
+ const middlewares = [sagaMiddleware, routerMiddleware(reducerConfig.history)];
const enhancers = [applyMiddleware(...middlewares)];
const createReducer = setupCreateReducer(customReducers, reducerConfig);
const persistedReducer = persistReducer(runtimePersistConfig, createReducer());
const store = createStore(
persistedReducer,
initialState,
composeEnhancers(...enhancers),
);
// Extensions
+ store.runSaga = sagaMiddleware.run;
+ store.runSaga(rootSagas(customSagas));
augmentStore(createReducer, store);
const persistor = persistStore(store);
return { store, persistor };
}
在那里,我使用
redux
和redux-persist
,我還配置了 redux 開發工具。 並具有一些核心功能,例如預先配置和持久的preferences
這是我的customSagas.js
:
import sessionsSaga from './sessionsSaga';
export default [
sessionsSaga,
];
這是我的sessionSaga.js
:
import { takeLatest } from 'redux-saga/effects';
export function* logout() {
console.log('hello world');
}
export default function* logoutSaga() {
yield takeLatest('LOGOUT' , logout);
}
這就是我在 JSX 中調用 saga 的方式:
function App() {
return (
<Button
push={() => dispatch({ type: 'LOGOUT' })}
>
Logout Saga
</Button>
);
}
我可以看到在我的 redux 開發工具中調度了LOGOUT
類型,但是我看不到 hello world。
我哪里失敗了?
當您在rootSaga
中yield all([...])
時,您必須調用sessionSaga()
之類的函數。 在您的代碼中,您只是列出了生成器函數。 見根傳奇文檔
我認為是這樣的:
import { all, call } from 'redux-saga/effects'
export default (customSagas) => function* rootSaga() {
yield all(customSagas.map(saga => call(saga)));
}
可以工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.