Repository files navigation

A modular redux middleware for using fetch

1. Getting Started
2. Documentation
3. Best Practices

• Downloadredux-modular-fetch-middleware usingnpm i redux-modular-fetch-middleware oryarn add redux-modular-fetch-middleware
• Apply the middleware using theredux-modular-fetch-middleware default export, like so...

import{createStore,applyMiddleware}from'redux'importfetchMiddlewarefrom'redux-modular-fetch-middleware';...applyMiddleware(fetchMiddleware);

• Define afetch object with aurl property on the dispatch you want to call fetch

constactionCreatorMethod=()=>({fetch:{url:'https://someurl.com'},type:SOME_ACTION_TYPE});

That's it! Afetch object with aurl property is all you need to call fetch on an action.

• fetch The required object on a dispatch call to call fetch
• url The url that will be called by fetch

You can define what the requestmethod,body, andheader look like. In fact, any options that you can define in fetch natively will be passed on just as if you were calling fetch yourself.

• options Fetch options with properties likemethod,header, andbody. By default,GET will be used as the request method

constsetUserActionCreator=()=>({fetch:{options:{body:{user:{name:'First Last',address:'123 Main St.'}},method:'POST'},url:'https://someapi.com/user'},type:SET_USER_REQUEST});

If you're retrieving data, you can define what response method will be used to retrieve that data.

• responseMethod Theresponse method used to retrieve data. By default,json will be used as the response method if theheader content-type is 'application/json'.Warning: If aresponseMethod is provided and your fetch call returns a response that is not resolvable by theresponseMethod provided, the Promise will be rejected.

constgetProfilePicActionCreator=(userId)=>({fetch:{responseMethod:'blob',url:`https://someapi.com/user/${userId}/profilePic`},type:GET_PROFILE_PIC_REQUEST});

Being able to call fetch without being able to access the data or error isn't very useful. Those options are provided through the properties shown below.

• onFailure The function that will be called if the fetch request fails. Called withdispatch,getState, anderror
• onSuccess The function that will be called if the fetch request succeeds. Called withdispatch,getState, anddata

You are also given thestore's currentgetState anddispatch function to notify your reducers your request was successful or unsuccessful.

constgetProfilePicActionCreator=(userId)=>({fetch:{onFailure:(dispatch,getState,error)=>{dispatch({error:error,type:GET_PROFILE_PIC_FAILURE});},onSuccess:(dispatch,getState,data)=>{dispatch({data:data,type:GET_PROFILE_PIC_SUCCESS});},responseMethod:'blob',url:`https://someapi.com/user/${userId}/profilePic`},type:GET_PROFILE_PIC_REQUEST});

You can even define what fetch implementation you would like the middleware to use when applying the middleware.

importcrossFetchfrom'cross-fetch';importfetchMiddlewarefrom'redux-modular-fetch-middleware';...applyMiddleware(fetchMiddleware(crossFetch));

This can be especially useful when wanting to set global options in your fetch request likeheader andcredentials. By default,window.fetch will be used as the fetch implementation.

Required Object

• fetch The required object on a dispatch call to call fetch

Required Properties onfetch Object

• url The url that will be called by fetch

Optional Properties onfetch Object

• onFailure The function that will be called if the fetch request fails. Called withdispatch,getState, anderror
• onSuccess The function that will be called if the fetch request succeeds. Called withdispatch,getState, anddata
• options Fetch options with properties likemethod,header, andbody. By default,GET will be used as the request method
• responseMethod Theresponse method used to retrieve data. By default,json will be used as the response method if theheader content-type is 'application/json'.Warning: If aresponseMethod is provided and your fetch call returns a response that is not resolvable by theresponseMethod provided, the Promise will be rejected.
  • 'arrayBuffer'
  • 'blob'
  • 'formData'
  • 'json'
  • 'text'

Fetch Implementation

The fetch implementation can be defined by passing it in as the parameter when applying the middleware. By default,window.fetch will be used as the fetch implementation.

Async Actions

Redux docs suggest using three actions for an asynchronous request: an action indicating your request began, an action indicating your request succeeded, and an action indicating your request failed. Below is an example of how to heed this suggestion usingredux-modular-fetch-middleware.

constgetUserActionCreator=(userId)=>({fetch:{onFailure:(dispatch,getState,error)=>{dispatch({error:error,type:GET_USER_FAILURE});},onSuccess:(dispatch,getState,data)=>{dispatch({data:data,type:GET_USER_SUCCESS});},url:`https://someapi.com/user/${userId}`},type:GET_USER_REQUEST});