redux-saga-fetch-actions

redux-saga-fetch-actions

Saga for consistent async actions.

Dispatch an action in FSA format with your desired prefix (default is "FETCH_").

dispatch({
    type: "FETCH_WIDGETS",
    payload: {
        request: () => Promise.resolve([1, 2, 3, 4, 5]),
        onSuccess: (response) => {
            alert(response)
        },
        onFailure: (error) => {
            alert(error)
        }
    },
    meta: "Some data"
})

The saga will then dispatch a request action, and either a success or failure action, both in FSA format. The meta property will be passed through to both. If no meta is provided, it will be set to be the request function.

{
    type: "WIDGETS_SUCCESS",
    payload: [1,2,3,4,5] // The request response,
    meta: "Some data"
}

{
    type: "WIDGETS_FAILED",
    payload: "Something went wrong!", // The exception error,
    meta: "Some data"
    error: true
}

Installation

npm install redux-saga-fetch-actions

import { all } from "redux-saga/effects";
import createSagaMiddleware from "@redux-saga/core";
import { fetchSaga } from "redux-saga-fetch-actions";
import { applyMiddleware, createStore } from "redux";
import { rootReducer } from "../reducers";
 
const sagaMiddleware = createSagaMiddleware();
 
export const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
 
export function* rootSaga() {
    yield all([fetchSaga("FETCH_")]);
}
 
sagaMiddleware.run(rootSaga);

Saga Props

Prop	Type	Description
prefix (default = "FETCH_")	string	Prefix to trigger the fetch saga

Action Payload Props

Prop	Type	Description
request (required)	() => Promise	Fetch request
onSuccess	(response: any) => void	Function called if the request was successful
onFailure	(error: Error) => void	Function called if the request failed