Redux Axios Middleware

This repository is related to npm package @ytkj/redux-axios-middleware.

Installation

npm install -S @ytkj/redux-axios-middleware

Usage

1. Create your store applying raMiddleware with thunkMiddleware.

   import { createStore, applyMiddleware } from 'redux';
   import thunkMiddleware from 'redux-thunk';
   import { AxiosError } from 'axios';
   
   import { raAction, createRAMiddleware, RAAction } from '@ytkj/redux-axios-middleware';
   
   const raMiddleware = createRAMiddleware({
       actionBeforeFetch: { type: 'FOO_ACTION'},
       actionAfterFetch: { type: 'BAR_ACTION'},
       actionCreatorOnFail: (e: AxiosError) => ({type: 'ERROR', payload: e.response.data}),
   });
   store = createStore(reducer, applyMiddleware(thunkMiddleware, raMiddleware));

2. dispatch raAction from inside your ThunkAction.

   import { ThunkAction, ThunkDispatch }  from 'redux-thunk';
   
   const FETCH_MESSAGE: 'FETCH_MESSAGE' = 'FETCH_MESSAGE';
   interface FetchMessage extends Action<typeof FETCH_MESSAGE> {
       payload: string;
   }
   
   function fetchMessage(
       url: string
   ): ThunkAction<Promise<RAAction>, State, void, RAAction|FetchMessage> {
   
       let thunkAction = async(
           dispatch: ThunkDispatch<State, void, RAAction|FetchMessage>,
           getState: () => State
       ): Promise<RAAction> => {
   
           return dispatch(raAction({
               url: url,
               method: 'GET',
               successActionType: FETCH_MESSAGE,
           }));
       }
   
       return thunkAction;
   }
   
   store.dispatch(fetchMessage('/api/hello/world'));

API

createRAMiddleware()

middleware factory function.

arguments

type	description
CreateRAMiddlewareOption	1st argument

return

type	description
RAMiddleware	created raMiddleware

CreateRAMiddlewareOption

property	type	description
actionBeforeFetch?	Action|Action[]	action that should be dispatched before sending Ajax request.
actionAfterFetch?	Action|Action[]	action that should be dispatched after receiving Ajax response, whether success or fail.
actionCreatorOnFail?	(e: AxiosError) => Action | Array<(e: AxiosError) => Action>	function that shold be called after receiving failure response. AxiosError object will be passed to this function.
axiosClient?	AxiosInstance	axios instance that shold be used to call Ajax request; default to axios global object.

raAction()

action creator for RAAction.

argument

type	description
RAActionPayload	1st argument.

return

type	description
RAAction	dispatched and will trigger some events in raMiddleware

RAActionPayload

property	type	description
url	string	request URL.
method	'GET'|'POST'|'PUT'	requst HTTP method.
successActionType	any	action.type string.
requestBody?	any	request body (only for 'POST' and 'PUT').
requestConfig?	AxiosRequestConfig	request config for axios.
successChainAction?	Action|TunkAction|Action[]|ThunkAction[]	action that shold be dispatced after receiving Ajax response only if succeed.
successChainActionCreator?	ActionCreator<Action|ThunkAction> | Array<ActionCreator<Action>|ActionCreator<TunkAction>>	action creator that shold be dispatched after receiving Ajax response only if succeed. response content(res.data) will be passed as argument.