@ytkj/redux-axios-middleware v0.1.3

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

return

CreateRAMiddlewareOption

raAction()

action creator for RAAction.

argument

return

RAActionPayload