createApis
Build an Axios API that implements a cancellable request caller that can be cancelled by redux sagas.
Accepts default Axios options.
Returns an object with
{ api, sagaApi }whereapiis the cancellable axios API, andsagaAPiis an abstraction that usesapito simplify make API calls using redux sagas (see below).
Sample usage:
const { api, sagaApi } = createApis({baseUrl: 'http://myserver.com',timeout: 1000});const req = api.get('/todos');req.then(console.log);if (true) {// Manually cancel this requestreq.cancel()}
The base api object allows you to make regular API calls from anywhere in your app. This is basic axios stuff, with an added cancel function with every request.
Param | Type | Description |
path |
| Request URL path |
options | | Axios options |
Param | Description |
path | Request URL path |
payload | Request payload |
options | Axios options |
Param | Description |
path | Request URL path |
payload | Request payload |
options | Axios options |
Param | Description |
path | Request URL path |
payload | Request payload |
options | Axios options |
Param | Description |
path | Request URL path |
payload | Request payload |
options | Axios options |
Sets authorization header on axios instance
Param | Type | Description |
token |
| Bearer auth token |
Removes authorization header on axios instance
Adds a header value
Kind: global function
Param | Type | Description |
name |
| header name |
value |
| header value |
Removes a header value
Param | Type | Description |
name |
| header name |
Saga API is a helper to reduce the amount of code one writes when make an ajax call. Here is your typical ajax call:
try {const { data } = await axios.get('/todos');return data;}cathch(e) {console.log(e);}
If we were to do this inside of sagas it would look like this:
function* () {try {const { data } = yield axios.get('/todos');yield put(fetchSuccess(data));}cathch(e) {yield put(fetchFailed(e));}yield put(fetchDone());}
As you can tell, this can get repetitive, hence why this abstraction was built. Simply put, you pass it a path, payload, success action, fail action, and optional done action. It will handle try catching for you:
yield sagaApi.put('/todos/1', { done: true }, updateSuccess, updateFail, udpateDone?);
One thing to note, if you decide to add a saga for done action, you will receive a payload of { data, error } so you can decide if you want to do anything with the data.
Param | Type | Required | Description |
path |
| yes | Request URL path |
successAction |
| yes | Redux action to dispatch on success |
failAction |
| yes | Redux action to dispatch on fail |
[doneAction] |
| no | Redux action to dispatch when completed |
Param | Type | Required | Description |
path |
| yes | Request URL path |
payload |
| yes | Request payload |
successAction |
| yes | Redux action to dispatch on success |
failAction |
| yes | Redux action to dispatch on fail |
[doneAction] |
| no | Redux action to dispatch when completed |
Param | Type | Required | Description |
path |
| yes | Request URL path |
payload |
| yes | Request payload |
successAction |
| yes | Redux action to dispatch on success |
failAction |
| yes | Redux action to dispatch on fail |
[doneAction] |
| no | Redux action to dispatch when completed |
Param | Type | Required | Description |
path |
| yes | Request URL path |
payload |
| yes | Request payload |
successAction |
| yes | Redux action to dispatch on success |
failAction |
| yes | Redux action to dispatch on fail |
[doneAction] |
| no | Redux action to dispatch when completed |
Param | Type | Required | Description |
path |
| yes | Request URL path |
payload |
| yes | Request payload |
successAction |
| yes | Redux action to dispatch on success |
failAction |
| yes | Redux action to dispatch on fail |
[doneAction] |
| no | Redux action to dispatch when completed |
