相似于reducer,咱们能够用combineReducers多个模块的reducers,以下图:javascript
/**reducers文件**/
import { combineReducers } from 'redux'
import homeReducer from './home'
import loginReducer from './login'
const rootReducer = combineReducers({
homeReducer,
homeReducer
})
export default rootReducer
复制代码
一样的,redux-saga依然能够分模块存放于单一的入口文件中。java
/**sagas文件**/
// saga模块化引入
import { fork, all } from 'redux-saga/effects'
// 异步逻辑
import { homeSagas } from './signin'
import { loginSagas } from './signout'
// 单一进入点,一次启动全部Saga
export default function* rootSaga() {
yield all([fork(homeSagas), fork(loginSagas)])
}
export default rootReducer
复制代码
最后,定义store.js文件redux
/**store文件**/
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducers';
import sagas from './sagas'
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
const store = createStore(
reducer,
enhancer
)
sagaMiddleware.run(sagas)
export default store
复制代码
至此,咱们就能够分模块归置sagas,这样有助于后期的维护,而不至于全部的sagas都所有归置在一块儿。app