How does redux-saga watch on actions dispatched in routesMap thunk?

[yuejiang-code]

Hi, I'm trying to dispatch an action in routesMap thunk, but I'm not sure how to do that since I can't run sagaMiddleware.run(sagas) until I have created a store. And I can't create a store without passing redux-first-router middleware. So I'm in a chicken and egg problem. I was able to get the thunk dispatch to work with a setTimeout dispatch, but that's not working out well as my component depends on the data fetched by routesMap thunk dispatch. Any advice?

const routesMap = {
  HOME: {
    path: "/",
    thunk: (dispatch, state) => {
      setTimeout(() => {
        dispatch({ type: actions.FETCH_CASH_REPORTING_DATA });
      }, 1000);
    },
    component: "CashReportingView",
  },
};

export default routesMap;

import createSagaMiddleware from "redux-saga";
import { composeWithDevTools } from "redux-devtools-extension";
import { createLogger } from "redux-logger";
import { connectRoutes } from "redux-first-router";
import _ from "lodash";

import { reducers, sagas } from "../ducks";
import routesMap from "./routesMap";

const {
  reducer: locationReducer,
  middleware: locationMiddleware,
  enhancer,
} = connectRoutes(routesMap);

const pageReducer = (state = "CashReportingView", action = {}) => {
  return _.get(routesMap, "[action.type].component", state);
};

const reducer = combineReducers({
  page: pageReducer,
  location: locationReducer,
  cashReportingView: reducers.cashReportingReducer,
});

const loggerMiddleware = createLogger();
const sagaMiddleware = createSagaMiddleware();
const middlewares = composeWithDevTools(
  applyMiddleware(sagaMiddleware, locationMiddleware, loggerMiddleware)
);
const enhancers = compose(enhancer, middlewares);

const store = createStore(reducer, enhancers);

sagaMiddleware.run(sagas);
export default store;