Redux Saga
On this page
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 = truebreakcase fetchData.SUCCESS:draft.loading = falsedraft.data = action.payloadbreakcase fetchData.FAILURE:draft.loading = falsedraft.error = truebreak}})
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);}