roadhog-saga

3.0.4 • Public • Published

roadhog-saga

Easy API fetching with configuration stored into Redux.

Fetch your API easily with Redux and redux-saga !

CircleCI NPM Version Coverage Status Size

Installation

npm install --save roadhog-saga

or

yarn add roadhog-saga

Usage

In one of your saga, you want to retrieve all POSTS from your API.

You should :

  1. Configure your redux to set the route
  2. Write your saga

1 - Redux configuration

Add a new reducer with a default state to state.config :

config.js

export default () => ({
  api: {
    POSTS: {
      GET: '/api/posts',
    },
  },
})
/* eslint-enable global-require */

store.js

import config from './config'
 
const store = createStore(
  combineReducers({
    config,
    // your others reducers
  }),
  compose(
    applyMiddleware(sagaMiddleware, middleware),
  ),
)

2 - Saga

In this example, we retrieve posts when an action ACTION is catched, and then we print these posts.

import { call } from 'redux-saga/effects'
import roadhog from 'roadhog-saga'
 
export default function* () {
  yield takeLatest('ACTION', function* () {
    const posts = yield call(roadhog('GET_POSTS'))
    console.log(posts)
  }
}

3 - Error handling

roadhog-saga triggers some redux actions to help you handle API calls :

  • a START action : before a fetch is triggered
  • an ERROR action : when the fetch is on error
  • an END action : when the fetch is finished (on error or not)

The name of the action is generated from your resources. Based on the previous example these actions are :

  • API_GET_POSTS_START
  • API_GET_POSTS_ERROR
  • API_GET_POSTS_END

You can then catch these actions in one of your saga :

yield takeEvery(action => /API_.*?_STARTED/.test(action.type), /* start a loading indicator */)
 
yield takeEvery(
  [
    action => /API_.*?_END/.test(action.type),
    action => /API_.*?_ERROR/.test(action.type),
  ],
  /* stop a loading indicator */
)
 
yield takeEvery(action => /API_.*?_ERROR/, /* log an error */)

About alakarte

alakarte is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL Fabien JUIF

Readme

Keywords

none

Package Sidebar

Install

npm i roadhog-saga

Weekly Downloads

0

Version

3.0.4

License

MIT

Unpacked Size

202 kB

Total Files

37

Last publish

Collaborators

  • fabienjuif
  • guillaume.crespel