/

Redux Saga

react
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

github.com/afitiski...routines

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

Access the action types

js
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:

js
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

js
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

js
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
);
}
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.