jwkellyiii / redux-saga-rest

Thin wrapper around the Fetch API with middleware for use with redux-saga.

redux-saga-rest

redux-saga-rest is a thin wrapper around the Fetch API that integrates with redux-saga and supports request/response middleware.

Installation

# dependencies
yarn add redux redux-saga isomorphic-fetch

yarn add redux-saga-rest

Usage Example

api.js

import { put, select } from 'redux-saga/effects';
import { API } from 'redux-saga-rest';

import * as selectors from './selectors';
import * as actions from './actions';

const authMiddleware = () => function* (req, next) {

    // request middleware
    const user = yield select(selectors.user);
    const headers = req.headers || new Headers();
    headers.set('Authorization', `Bearer ${user.token}`);

    // retrieve the response
    const res = yield next(new Request(req, { headers }));

    // response middleware
    if (res.status === 401) {
        yield put(actions.logout());
    }

    // return the response
    return res;
};

export const auth = new API('/api/')
    .use(authMiddleware());

TODO: Describe the middleware application order.

sagas.js

import { takeEvery, put } from 'redux-saga/effects';

import * as constants from './constants';
import * as actions from './actions';
import { auth } from './api';

function* watchUpdateProfile() {
    yield takeEvery(constants.UPDATE_PROFILE, function* (action) {
        const res = yield auth.patch('/profile/', action.payload);
        
        if (res.ok) {
            yield put(actions.updateProfileSuccess());
        } else {
            yield put(actions.updateProfileFailure());
        }
    });
}

export default function* () {
    yield [
        watchUpdateProfile(),
    ];
};