Skip to content

Easy API fetching with configuration stored into Redux

License

Notifications You must be signed in to change notification settings

unirakun/roadhog-saga

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 uni rakun unirakun

uni rakun is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL Fabien JUIF

About

Easy API fetching with configuration stored into Redux

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •