Enhanced thunk middleware for Redux.
npm install auto-thunkEnhanced 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
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.
```
npm i --save auto-thunk
`js
import autoThunkMiddleware from 'auto-thunk'
const autoThunk = autoThunkMiddleware({
httpClient: axios.create(),
errorHandler: error => { ... }, // Default error handler
log:
track:
})
const store = createStore(
`
#### 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 '
log: '
// Track function will be called with the given argument.
track:
#### 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/foos/${id}
export const deleteFoo = ({ id }) => ({
action: { type: 'DELETE_FOO', data: id },
request: ['delete', ]
})
// 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:
{ 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}]``