Error-handling for redux-saga
npm install redux-saga-helpersredux-sagaThis library provides a selection of small utilities to better handle sagas.
- Following the error-handling pattern recommended within the redux-saga docs) can lead to code that silently swallows errors and that gives cryptic error messages. This is because redux-saga#put effects cause dispatches that might error causing corruption of React's internal state.
- Additionally JavaScript's try-catch syntax does not provide an easy way to catch specific errors.
``sh`
npm install --save redux-saga-helpers
`js
import { call, put } from 'redux-saga/effects'
import { toResult } from 'redux-saga-helpers'
import { fetchProductSuccess, fetchProductError } from './actions'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * loadProduct () {
const [ product, error ] = yield call(toResult(fetchProduct), 1)
if (!error) {
yield put(fetchProductSuccess(product))
} else {
yield put(fetchProductError(error))
}
}
`
`js
import { createAction } from 'redux-actions'
import { call } from 'redux-saga/effects'
import { emitActions } from 'redux-saga-helpers'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * loadProduct () {
// emitActions(fetchProduct) automatically generates aFETCH_PRODUCT_SUCCESS
// or FETCH_PRODUCT_ERROR action.`
yield call(emitActions(fetchProduct), 1)
}
`js
import { createAction } from 'redux-actions'
import { call } from 'redux-saga/effects'
import { createEmitActions } from 'redux-saga-helpers'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * loadProduct () {
const successAction = createAction('PRODUCT_REQUEST_RECEIVED')
const errorAction = createAction('PRODUCT_REQUEST_FAILED')
const emitProductActions = createEmitActions(successAction, errorAction)
yield call(emitProductActions(fetchProduct), 1)
}
`
`js
import { createAction } from 'redux-actions'
import { call } from 'redux-saga/effects'
import { createBooleanCallHandler, toActionPutter } from 'redux-saga-helpers'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * loadProduct () {
const successHandler = toActionPutter(createAction('PRODUCT_REQUEST_RECEIVED'))
const errorHandler = toActionPutter(createAction('PRODUCT_REQUEST_FAILED'))
const booleanCallHandler = createBooleanCallHandler(successHandler, errorHandler)
yield call(booleanCallHandler(fetchProduct), 1)
}
`
`js
import { call } from 'redux-saga/effects'
import { createMatchAsCallHandler } from 'redux-saga-helpers'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * loadProduct () {
const okHandler = (value) => ${value} ${value}handle authentication errors: ${err}
const errHandler = (err) => err
const authErrorHandler = (err) => `
const matchAsCallHandler = createMatchAsCallHandler({
Ok: okHandler,
Err: errHandler,
AuthError: authErrorHandler
})
yield call(matchAsCallHandler(fetchProduct), 1)
}
`js
import { call } from 'redux-saga/effects'
import { toResult, match } from 'redux-saga-helpers'
function fetchProduct (id) {
return fetch(/products/${id})
}
export function * testMatch () {
const log = console.log.bind(console)
const fetchProductAsResult = toResult(fetchProduct)
const result = yield fetchProductAsResult(1)
return yield match(result).as({
Ok: (value) => call(log, ${value} ${value}),``
Err: (err) => call(log, err),
})
}