https://github.com/ytkj/redux-axios-middleware

Redux middlware with axios client powered by TypeScript
https://github.com/ytkj/redux-axios-middleware

axios middleware redux typescript

Last synced: 10 days ago
JSON representation

Redux middlware with axios client powered by TypeScript

• Host: GitHub
• URL: https://github.com/ytkj/redux-axios-middleware
• Owner: ytkj
• License: mit
• Created: 2019-05-29T13:53:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:55:25.000Z (almost 2 years ago)
• Last Synced: 2024-09-22T09:11:34.456Z (3 months ago)
• Topics: axios, middleware, redux, typescript
• Language: TypeScript
• Homepage:
• Size: 965 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Redux Axios Middleware

This repository is related to npm package [@ytkj/redux-axios-middleware](https://www.npmjs.com/package/@ytkj/redux-axios-middleware).

## Installation

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

## Usage

1. Create your `store` applying `raMiddleware` with `thunkMiddleware`.

    ```typescript

    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`.

    ```typescript

    import { ThunkAction, ThunkDispatch }  from 'redux-thunk';

    const FETCH_MESSAGE: 'FETCH_MESSAGE' = 'FETCH_MESSAGE';

    interface FetchMessage extends Action {

        payload: string;

    }

    function fetchMessage(

        url: string

    ): ThunkAction, State, void, RAAction|FetchMessage> {

        let thunkAction = async(

            dispatch: ThunkDispatch,

            getState: () => State

        ): Promise => {

            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[]`](https://redux.js.org/basics/actions)|`action` that should be dispatched before sending Ajax request.|

|`actionAfterFetch?`|[`Action\|Action[]`](https://redux.js.org/basics/actions)|`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`](https://github.com/axios/axios/blob/master/index.d.ts#L79) object will be passed to this function.|

|`axiosClient?`|[`AxiosInstance`](https://github.com/axios/axios#axios-api)|`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`](https://github.com/axios/axios#request-config)|request config for `axios`.|

|`successChainAction?`|`Action\|TunkAction\|Action[]\|ThunkAction[]`|`action` that shold be dispatced after receiving Ajax response only if succeed.|

|`successChainActionCreator?`|`ActionCreator \| Array\|ActionCreator>`|`action creator` that shold be dispatched after receiving Ajax response only if succeed. response content(`res.data`) will be passed as argument.|