Redux Saga

Table of contents

Routines

An alternative side effect model for Redux apps

https://redux-saga.js.org github.com/redux-sa...ux-saga/

Routines

Routines for redux-saga

import { createRoutine } from 'redux-saga-routines'
const fetchData = createRoutine('FETCH_DATA')

Access the action types

routine.TRIGGER === 'ACTION_TYPE_PREFIX/TRIGGER'
routine.REQUEST === 'ACTION_TYPE_PREFIX/REQUEST'
routine.SUCCESS === 'ACTION_TYPE_PREFIX/SUCCESS'
routine.FAILURE === 'ACTION_TYPE_PREFIX/FAILURE'
routine.FULFILL === 'ACTION_TYPE_PREFIX/FULFILL'

You also have 5 action creators: trigger, request, success, failure, fulfill:

routine.trigger(payload) === { type: 'ACTION_TYPE_PREFIX/TRIGGER', payload }
routine.request(payload) === { type: 'ACTION_TYPE_PREFIX/REQUEST', payload }
routine.success(payload) === { type: 'ACTION_TYPE_PREFIX/SUCCESS', payload }
routine.failure(payload) === { type: 'ACTION_TYPE_PREFIX/FAILURE', payload }
routine.fulfill(payload) === { type: 'ACTION_TYPE_PREFIX/FULFILL', payload }

Reducer

import produce from 'immer'
import { fetchData } from './routines'
const initialState = {
  data: null,
  loading: false,
  error: null
}
export const exampleReducer = (
  state = initialState,
  action: ExampleActionInterface
) =>
  produce(state, draft => {
    switch (action.type) {
      case fetchData.REQUEST:
        draft.loading = true
        break
      case fetchData.SUCCESS:
        draft.loading = false
        draft.data = action.payload
        break
      case fetchData.FAILURE:
        draft.loading = false
        draft.error = true
        break
    }
  })

Sagas

export function* fetchDataRequest(
  { payload },
) {
  const { fromDate, toDate } = payload;
  try {
    const walletId = yield select(getWalletId);
    const { data } = yield call([walletAdapter, 'requestPendingTransactions'], {
      walletId,
      fromDate,
      toDate,
    });
    yield put(getPendingTransactions.success(transformTransactionValues(data)));
  } catch (error) {
    yield put(getPendingTransactions.failure(error));
  }
}
export function* walletSagas() {
  yield takeEvery(
    getPendingTransactions.REQUEST,
    getPendingTransactionsRequest as any
  );
}

Edit this page