redux-saga 多个saga文件归类存放

相似于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

相关文章
相关标签/搜索