redux-saga 多個saga文件歸類存放

相似於reducer，咱們能夠用combineReducers多個模塊的reducers,以下圖：

/**reducers文件**/
import { combineReducers } from 'redux'
import homeReducer from './home'
import loginReducer from './login'

const rootReducer = combineReducers({
  homeReducer,
  homeReducer
})

export default rootReducer
複製代碼

一樣的，redux-saga依然能夠分模塊存放於單一的入口文件中。

/**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文件

/**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都所有歸置在一塊兒。