Redux-Saga for next.js

CategorySagas.js

import {call, put, take, fork} from 'redux-saga/effects'
import {END} from 'redux-saga'
import CategoryActions, {CategoryTypes} from '../Redux/CategoryRedux'

// attempts to fetch category
export function* fetchCategoryServer (api) {
  let action = yield take(CategoryTypes.CATEGORY_SERVER)
  // check when it stopped
  while (action !== END) {
    yield fork(fetchCategoryAPI, api)
    action = yield take(CategoryTypes.CATEGORY_SERVER)
  }
}

function* fetchCategoryAPI (api) {
  const response = yield call(api.getCategory)
  if (response.ok) {
    yield put(CategoryActions.categorySuccess(response.data.data))
  } else {
    yield put(CategoryActions.categoryFailure())
  }
}

ReduxWrapper.js

import React, {Component} from 'react'
import withRedux from 'next-redux-wrapper'
import {END} from 'redux-saga'
//init Store
import initStore from '../Redux'
//rootSaga & sagaMiddleWare
import rootSaga from '../RootSaga.js'
import { sagaMiddleware } from '../Redux/CreateStore'
//redux actions
import CategoryActions from '../Redux/CategoryRedux'

let clientTask = null

export default function reduxWrapper (ReduxComponent:Object) {
  class ReduxContainer extends Component {
    static async getInitialProps ({ store, req, isServer }) {
      //check if it's on server or not, otherwise you will dispatch everytime you change route
      if (isServer) {
        const rootTask = sagaMiddleware.run(rootSaga)
        //dispatch for fetching initial data
        store.dispatch(CategoryActions.categoryServer())
        //end the task 
        store.dispatch(END)
        //await for task to complete then display 
        await rootTask.done.then(() => {
          return
        })
      } else {
        return
      }
    }

    constructor (props:any) {
      super(props)
      //start saga monitor for client side check whether clientTask is running
      if (!clientTask) {
        clientTask = sagaMiddleware.run(rootSaga)
      }
    }

    render () {
      return (
        <ReduxComponent {...this.props} />
      )
    }
  }
  return withRedux(initStore)(ReduxContainer)
}

RootSaga.js

import { takeLatest } from 'redux-saga'
import { fork } from 'redux-saga/effects'
// server sagas
import { fetchCategoryServer } from './CategorySagas'
// client sagas
import { login, logout } from './AuthSagas'
// api
import API from '../Services/Api'

/* ------------- API ------------- */

// The API we use is only used from Sagas, so we create it here and pass along
// to the sagas which need it.
const api = API.create()

function* serverSagas () {
  yield [
    fork(fetchCategoryServer, api)
  ]
}

function* clientSagas () {
  yield [
    fork(logout),
    fork(login, api)
  ]
}

export default function* root () {
  yield [
    fork(serverSagas),
    fork(clientSagas)
  ]
}