Saga sequence

README.md

Saga Sequence with NextJS

Requirements:

1. You need to have set up next-redux-saga package.
2. Some understanding of how Redux Saga work is needed.

The example isn't complete with all files, but if know how Redux Saga works you might imagine yourself how the missing file look like.

If something isn't clear I can provide more info and update the gist.

getFirstAndSecondAction.js

import { GET_FIRST_AND_SECOND } from "actions/types";

export function getFirstAndSecondAction() {
  return {
    type: GET_FIRST_AND_SECOND
  };
}

MyComponent.js

import React, { Component } from "react";
import { getFirstAndSecondAction } from "actions/getFirstAndSecondAction";

class MyComponent extends Component {
  static async getInitialProps({ store }) {
    
    // Trigger the saga sequence
    store.dispatch(getFirstAndSecondAction());
    
    return {};
  }
  render() {
    return (
      <div>
        <p>My Component</p>
      </div>
    );
  }
}

export default MyComponent;

sagaSequence.js

import {
  call,
  select,
  takeLatest
} from "redux-saga/effects";
import { fistSaga } from "sagas/fistSaga";
import { secondSaga } from "sagas/secondSaga";
import * as actionTypes from "actions/types";

const getSomeData = state => state.someData;

export function* getFirstAndSecondWatcher() {
  const saga = yield takeLatest(actionTypes.GET_FIRST_AND_SECOND, firstAndSecondSaga);
}

export function* firstAndSecondSaga() {
  // Call the first saga
  yield call(fistSaga, { type: actionTypes.GET_FIRST });
  
  // Once the first saga is completed get the result from the store (this time we get `someData` reducer)
  const someData = yield select(getSomeData);
  
  // Call the second saga with the info provided by the first one
  yield call(secondSaga, { type: actionTypes.GET_SECOND, data: someData });
}