redux-thunk-axios
v1.0.0
Published
Enhance your Thunk middleware with Axios controls over API requests.
Downloads
25
Readme
redux-thunk-axios
Enhance your Thunk middleware with Axios controls over API requests.
What it is for?
Controls action/payload dispatching, API request cancelation and lowers the amount of code required for redux action definition.
Install
$ npm install --save redux-thunk-axios
Basic usage examples
// Redux store definition
import thunk from 'redux-thunk';
import { enhance, setAxiosOptions } from 'redux-thunk-axios';
import { createStore, applyMiddleware } from 'redux';
import { actions } from './constants';
import { reducers } from './store';
setAxiosOptions({ headers: { 'X-Custom-Header': 'example' } });
const store = createStore(reducers, applyMiddleware(thunk, enhance(actions.API_CALL)));
// Redux Thunk action definition
import { actions } from './constants';
export default {
actionWithoutPromise: data => ({
type: actions.EXAMPLE_ACTION_1,
data
}),
basicActionWithPromise: data => ({
[actions.API_CALL]: {
types: [
// Order: request, success, failure must be obayed
actions.EXAMPLE_GET_REQUEST,
actions.EXAMPLE_GET_SUCCESS,
actions.EXAMPLE_GET_FAILURE,
],
promise: client => client.get('/api/example', { params: data })),
},
}),
actionWithPromiseAndAdditionData: data => ({
[actions.API_CALL]: {
types: [
actions.EXAMPLE_GET_REQUEST,
actions.EXAMPLE_GET_SUCCESS,
actions.EXAMPLE_GET_FAILURE,
],
promise: client => client.get('/api/example', { params: data })),
example1: 'this is the additional data example',
example2: data,
},
}),
actionWithPromiseAndAxiosOptions: data => ({
[actions.API_CALL]: {
types: [
actions.EXAMPLE_GET_REQUEST,
actions.EXAMPLE_GET_SUCCESS,
actions.EXAMPLE_GET_FAILURE,
],
promise: client => client.get('/api/example', { params: data })),
promiseOptions: {
headers: {'X-Custom-Header': 'foobar'},
},
},
}),
actionWithPromiseAndUniqueRequestIdentifier: data => ({
[actions.API_CALL]: {
types: [
actions.EXAMPLE_GET_REQUEST,
actions.EXAMPLE_GET_SUCCESS,
actions.EXAMPLE_GET_FAILURE,
],
promise: client => client.get('/api/example', { params: data })),
// When action is invoked multiple time each previous request gets cancelled
// If we require to invoke the action multiple times without them canceling each other we pass a unique token identifier
token: data.id,
},
}),
};
// Actions constants definition
export default {
API_CALL: 'API_CALL',
EXAMPLE_ACTION_1: 'EXAMPLE_ACTION_1',
EXAMPLE_GET_REQUEST: 'EXAMPLE_GET_REQUEST',
EXAMPLE_GET_SUCCESS: 'EXAMPLE_GET_SUCCESS',
EXAMPLE_GET_FAILURE: 'EXAMPLE_GET_FAILURE',
};
API
enhance(apiActionIdentifier [, axiosOptions])
Initializes the middleware.
setAxiosOptions(axiosOptions)
Set persistent Axios options.