Redux Fetch Resource

middleware

Summary

You must add the middleware to your redux store. We rely on redux-thunk so you’ll need to install it as a peer dependency. npm i --save redux-thunk

Reference

ReduxFetchResource(config: ?object)

Arguments

config (object)

Options to control behaviour.

config.defaultMethod (string)

Set the default method for all REST requests

• default - 'GET'

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers';

export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({ defaultMethod: 'POST' })
  )
)

config.isResponseError(response, body) (function)

a function that determines whether the response should be considered an error or not.

• response (object): the raw response object from fetch

• body (object): the response body

• default - response => !response.ok

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers';

function isResponseError (response, body) {
  return (
    !response.ok ||
    body.isError
  );
}

export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({ isResponseError })
  )
)

config.onStart (function)

A callback, called when any request starts

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

export const REQUEST_START = 'REQUEST_START';
export const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
export const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      onStart (payload, dispatch, getState) {
        console.log('Starting request...');
        dispatch({ type: FETCH_USERS_START });
      },
      onSuccess (payload, dispatch, getState) {
        console.log('Success!');
        dispatch({ type: FETCH_USERS_SUCCESS });
      },
      onError (payload, dispatch, getState) {
        console.log('Failed...');
        dispatch({ type: FETCH_USERS_ERROR });
      }
    })
  )
)

config.onSuccess (function)

A callback, called when any request is successful

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

export const REQUEST_START = 'REQUEST_START';
export const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
export const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      onStart (payload, dispatch, getState) {
        console.log('Starting request...');
        dispatch({ type: FETCH_USERS_START });
      },
      onSuccess (payload, dispatch, getState) {
        console.log('Success!');
        dispatch({ type: FETCH_USERS_SUCCESS });
      },
      onError (payload, dispatch, getState) {
        console.log('Failed...');
        dispatch({ type: FETCH_USERS_ERROR });
      }
    })
  )
)

config.onError (function)

A callback, called when any request or response error is encountered

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

export const REQUEST_START = 'REQUEST_START';
export const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
export const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      onStart (payload, dispatch, getState) {
        console.log('Starting request...');
        dispatch({ type: FETCH_USERS_START });
      },
      onSuccess (payload, dispatch, getState) {
        console.log('Success!');
        dispatch({ type: FETCH_USERS_SUCCESS });
      },
      onError (payload, dispatch, getState) {
        console.log('Failed...');
        dispatch({ type: FETCH_USERS_ERROR });
      }
    })
  )
)

config.startType (string)

An action to dispatch before a request starts

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

const REQUEST_START = 'REQUEST_START';
const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  {
    startType: REQUEST_START,
    errorType: REQUEST_ERROR,
    successType: REQUEST_SUCCESS
  }
);

config.successType (string)

An action to when a successful response is received

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

const REQUEST_START = 'REQUEST_START';
const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  {
    startType: REQUEST_START,
    errorType: REQUEST_ERROR,
    successType: REQUEST_SUCCESS
  }
);

config.errorType (string)

An action to dispatch when a request or response error is encountered

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

const REQUEST_START = 'REQUEST_START';
const REQUEST_SUCCESS = 'REQUEST_SUCCESS';
const REQUEST_ERROR = 'REQUEST_ERROR';

export default createStore(
  reducer,
  {
    startType: REQUEST_START,
    errorType: REQUEST_ERROR,
    successType: REQUEST_SUCCESS
  }
);

config.apiRoot (string)

A url or path to prepend to all REST requests

Show Example

import ReduxFetchResource from 'redux-fetch-resource';

// prepend with an absolute path
ReduxFetchResource({ apiRoot: '/api/v2' });

// Or with a url
ReduxFetchResource({ apiRoot: 'https://api.mydomain.com/v3/' });

config.includeCookies (boolean|string)

Determines to cookie behaviour. ** Cookies will not be sent with any request by default **

• false - Never send cookies [default]

• true - Include cookies but only for requests on the same domain

• 'cors' - Always include cookies in requests

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

// Dont send any cookies with requests (this is the default behaviour)
export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      includeCookies: false
    })
  )
);

// Send cookies on the same origin domain
export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      includeCookies: true
    })
  )
);

// Send cookies on cross origin requests
export default createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      includeCookies: 'cors'
    })
  )
);

config.headers (object|function)

A map (or function returning a map) of headers to send with all requests

Show Example

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ReduxFetchResource from 'redux-fetch-resource';
import reducer from './reducers.js';

// Use a function to resolve header which is called before every request
export const createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      headers: function (getState) {
        return {
          Authorization: 'Bearer ' + window.localStorage.getItem('token');
        };
      }
    })
  )
);

// or a plain object
export const createStore(
  reducer,
  applyMiddleware(
    thunk,
    ReduxFetchResource({
      headers: {
        'Content-Type': 'application/json',
        'Accept': '*'
      }
    });
  )
);

config.fetch (function)

An implementation of fetch which meets the whatwg spec. Use this option if you do not want to polyfill on the window for whatever reason