AutoThunk

Enhanced version of redux-thunk that provides a powerful and short syntax to write async action creators.

- backward compatible, drop in replacement of redux-thunk
- No dependencies

Motivation

Working with RESTful apis, async action creators are repetitive to write. In most cases, we just need to make a request and send an action passing the response data to the Redux store.
AutoThunk provides a short syntax to quickly connect your endpoints with the store.

Installation

``
npm i --save auto-thunk
`

Usage

$3

`js
import autoThunkMiddleware from 'auto-thunk'

const autoThunk = autoThunkMiddleware({
httpClient: axios.create(),
errorHandler: error => { ... }, // Default error handler
log: ,
track: ,
})

const store = createStore(, , applyMiddleware([autoThunk]))
`

$3

#### Syntax
`js
const getFoos = data => ({
// Action as a string or an object or an array.
action: ,
// Request parameters (If an object is passed, it will be passed directly to the httpClient)
request: ['', '', ],
// Log function will be called with '' as the first argument, and the response/error as the second argument.
log: '',
// Track function will be called with the given argument.
track: ,
// Automatically transform the body data to formData.
bodyType: 'formData',
// Override the default error handler if needed
errorHandler: error => { ... }
})
`

#### Examples


##### Basic example

`js
export const getFoos = () => ({
action: 'ADD_FOOS',
request: ['get', '/foos']
})
`

The equivalent with redux-thunk alone would be:

`js
import httpClient from 'myHttpClientInstance'
export const getFoos = async () => {
return (dispatch) => {
try {
const response = await httpClient.request({
method: 'get',
url: '/foos'
})
dispatch({
type: 'ADD_FOOS',
data: response.data
})
} catch (error) {
// some logic for error handling
}
}
}
`

##### Other examples
`js
export const deleteFoo = ({ id }) => ({
action: { type: 'DELETE_FOO', data: id },
request: ['delete', /foos/${id}]
})
// Dispatched action ==> { type: 'DELETE_FOO', data: }


// Dispatching several actions:
export const updateFooColor = ({ color, name, id }) => ({
action: [
{ type: 'SET_UPDATED_FOO', version: 'v2' }, // Dispatched action ==> { type: 'SET_UPDATED_FOO', data: , version: 'v2'}
{ type: 'UPDATE_FOO_COLOR', data: { color } }, // Dispatched action ==> { type: 'SET_UPDATED_FOO', data: { color } }
],
request: ['put', /foos/${id}, { color, name }]
})


// With logging and tracking and custom error handler:
export const createFoo = ({ name, color }) => ({
action: 'ADD_FOO',
request: ['post', '/foos', { name, color }],
track: { event: 'CREATION_OF_FOO' }, // Track function will be called with { event: 'CREATION_OF_FOO' }
log: 'createFoo', // Log function will be called with 'createFoo' as the first argument, and the response/error as the second argument.
errorHandler: error => console.log(error)
})
// Dispatched action ==> { type: 'ADD_FOO', data: }

// Using request as an object:
const postSomeStuff = ({name, cancelToken}) => ({
request: {
method: 'post',
url: /stuff,
data: { name },
cancelToken
}
})

// Making requests without dispatching any action:
export const getBars = () => ['get', '/bars']
export const getBar = ({id}) => ['get', /bars/${id}]
``