Edited at

複数のsagaを一つのrootSagaにまとめて使う

More than 1 year has passed since last update.


概要


  • sagaを複数のファイルで書いといて一つのrootSagaにまとめて使うなら、各ファイルで、effectをexportし、rootSaga内で、yield allすればOK


背景


  • reducerは複数のファイルで個々に管理して、combineReducersでまとめてexportするのが主流

  • sagaでも同じように、関心事に複数のファイルで分けて管理して、まとめてexporとして使いたい


環境


  • redux-saga: 0.16.0


手順


  1. item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする

  2. index.jsでeffetcの配列をimportしてyield allでrootSagaにまとめる


item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする

ポイントは、effectを配列としてexportするところ。


sagas/item.js

// 省略

const itemSagas = [
takeLatest(AA_AAA, aFlow),
takeLatest(BB_BBB, BFlow),
]
export default itemSagas;



sagas/register.js

// 省略

const registerSagas = [
takeLatest(CC_CCC, cFlow),
takeLatest(DD_DDD, dFlow),
]
export default registerSagas;



index.jsでeffetcの配列をimportしてyield allでrootSagaにまとめる

ポイントは、配列をspreadで展開(...のこと)してyield allするところ


sagas/index.js

import itemSagas from './item'

import registerSagas from './register'

// 省略

export default function* rootSaga() {
yield all([
...itemSagas,
...registerSagas,
])
}


完了!


(参考)

まとめたrootSagaを使うまでの方法も参考までに示します。至って普通です。


こんな感じでconfigureStoreを用意して


store/configureStore.js

import {createStore, applyMiddleware} from 'redux';

import rootReducer from '../reducers';
import createSagaMiddleware from 'redux-saga'
import rootSaga from '../sagas/index'
const sagaMiddleware = createSagaMiddleware()

const configureStore = initialState => {
const store = createStore(
rootReducer,
initialState,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga)
return store
};

export default configureStore



こんな感じでアプリに統合すればOK


packs/app_root.jsx

import React from 'react'

import ReactDOM from 'react-dom'
import {Provider} from 'react-redux';
import configureStore from '../store/configureStore';
import App from '../containers/App'

const store = configureStore();

document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('app_root'),
)
});



参考