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

概要

• 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'),
  )
});

参考

• https://github.com/redux-saga/redux-saga/issues/160