redux-actions-api-addon

API Addon for Flux Standard Action utilities for Redux.

1npm install --save redux-actions-api-addon

1import { createAPIAction } from 'redux-actions-api-addon';

Quick Links

• Custom Payload Creator Example
• Custom Meta Creator Example

The Problem?

When creating redux actions for API Requests, in reality there are 3 actions that are spawned

1. Request Event
2. Success Event
3. Failure Event

This can lead to a lot of boilerplate.

Now, there are some packages out there to handle this, however, these packages aren't FSA Compliant.

This add-on attemps to solve 2 things:

1. Reduce boilerplate by auto dispatching Request, Success, and Failure Events.
2. Be FSA Compliant.

In order to be FSA Compliant, most of the information is stored in the meta object.

The Simple Way ({string} endpoint)

createAPIAction(type, method, endpoint, payloadCreator = Identity, ?metaCreator)

Wraps an action creator so that its return value is the payload of a Flux Standard Action, and also creates multiple actions types that can be handled via middleware (Request, Success, and Failure Types).

The parameters you pass to your action are verb dependant

Also adds meta data, such as the method and endpoint to be used where you see fit.

If no payload creator is passed, or if it's not a function, the identity function is used.

Example:

1let createContact = createAPIAction('CREATE_CONTACT', 'POST', '/contacts' );
2
3expect(createContact( {name: "James Kusachi"} )).to.deep.equal({
4  "type": "CREATE_CONTACT",
5  "payload": { "name": "James Kusachi" },
6  "meta": {
7  	"api": true,
8  	"method": "POST",
9  	"endpoint": "/contacts",
10  	"types": [
11  		"CREATE_CONTACT_REQUEST",
12  		"CREATE_CONTACT_SUCCESS",
13  		"CREATE_CONTACT_FAILURE",
14  	]
15  }
16});

If the payload is an instance of an Error object, redux-actions will automatically set action.error to true.

The following are Verb Based Examples so you can see how to use your actions

GET

1let getItems = createAPIAction('ITEMS', 'GET', '/items' );
2getItems()
3

there is no need to pass a payload to your action, as its a GET request

Auto Generated Action Types

• ITEMS_GET_REQUEST
• ITEMS_GET_SUCCESS
• ITEMS_GET_FAILURE

Sample

1{
2  "type": "ITEMS",
3  "payload": {},
4  "meta": {
5    "api": true,
6    "method": "GET",
7    "endpoint": "/items",
8    "types": [
9      "ITEMS_GET_REQUEST",
10      "ITEMS_GET_SUCCESS",
11      "ITEMS_GET_FAILURE"
12    ]
13  }
14}

POST

1let createItem = createAPIAction('ITEMS', 'POST', '/items' );
2createItem({name: "James Kusachi"});

In a case where you POST new data, you dont need to specify an id, but you do need to pass data. Any data passed as the first parameter will be treated as the payload to be sent across.

Auto Generated Action Types

• ITEMS_POST_REQUEST
• ITEMS_POST_SUCCESS
• ITEMS_POST_FAILURE

Sample

1{
2  "type": "ITEMS",
3  "payload": {
4    "name": "James Kusachi"
5  },
6  "meta": {
7    "api": true,
8    "method": "POST",
9    "endpoint": "/items",
10    "types": [
11      "ITEMS_POST_REQUEST",
12      "ITEMS_POST_SUCCESS",
13      "ITEMS_POST_FAILURE"
14    ]
15  }
16}

PUT

1let updateItem = createAPIAction('ITEMS', 'PUT', '/items' );
2updateItem(15, {name: "Ronald McDonald"});
3

In the event of an UPDATE, you generally need to specify 2 pieces

• id of item you are updating
• the data you want to update with

In this case, we are updating primary item 15 with a new object

Auto Generated Action Types

• ITEMS_PUT_REQUEST
• ITEMS_PUT_SUCCESS
• ITEMS_PUT_FAILURE

Sample

1{
2  "type": "ITEMS",
3  "payload": {
4    "name": "james"
5  },
6  "meta": {
7    "api": true,
8    "method": "PUT",
9    "endpoint": "/items/10",
10    "types": [
11      "ITEMS_PUT_REQUEST",
12      "ITEMS_PUT_SUCCESS",
13      "ITEMS_PUT_FAILURE"
14    ]
15  }
16}

DELETE

1let deleteItem = createAPIAction('ITEMS', 'DELETE', '/items' );
2deleteItem(15);
3

In the case of DELETE, you just need to specify the primary id of tha which you want to delete. No need to pass in any payload data, as that would get dropped anyways because of DELETE

Auto Generated Action Types

• ITEMS_DELETE_REQUEST
• ITEMS_DELETE_SUCCESS
• ITEMS_DELETE_FAILURE

Sample

1{
2  "type": "ITEMS",
3  "payload": {},
4  "meta": {
5    "api": true,
6    "method": "DELETE",
7    "endpoint": "/items/5",
8    "types": [
9      "ITEMS_DELETE_REQUEST",
10      "ITEMS_DELETE_SUCCESS",
11      "ITEMS_DELETE_FAILURE"
12    ]
13  }
14}

Advanced ({function} endpoint)

In cases where you need to customize the endpoint with more granularity, you can pass a function as the endpoint instead of a string. This gives you access to the payload so you can create dynamic endpoints based on the payload.

NOTE: When using the Advanced method, you only need to send a payload across. In the Simple version, parameter order is important (IE: for PUTs, first parameter is ID, second is payload, for POST the parameter is the payload).

For the advanced version, you only need to send the payload, and your endpoint will return dynamically based on your function.

examples:

GET Example

1const customEndpoint = (p) => {
2  return `/tester/${p}/mctesterson`;
3};
4
5const getItems = createAPIAction(type, 'GET', customEndpoint);
6
7getItems(10); //GET /tester/10/mctesterson
8

POST Example

1const customEndpoint = (params) => {
2  return `/user/${params.id}/ronald/${params.name}`;
3};
4const createItem = createAPIAction(type, 'POST', customEndpoint);
5const payload = { id: 10, name: 'james' };
6
7createItem(payload); //POST /user/10/ronald/james

PUT Example

1const customEndpoint = (params) => {
2  return `/user/${params.id}`;
3};
4const updateItem = createAPIAction(type, 'PUT', customEndpoint);
5const payload = { id: 10, name: 'james' };
6
7updateItem(payload); //PUT /user/10

DELETE Example

1const customEndpoint = ({id, accountID}) => {
2  return `/user/${id}/account/${accountID}`;
3};
4const deleteItem = createAPIAction(type, 'DELETE', customEndpoint);
5const payload = { id: 10, accountID: 25 };
6
7deleteItem(payload); //DELETE /user/10/account/25

Custom Payload Creator Example

View Example

1const type = 'CONTACT';
2const actionCreator = createAPIAction(
3  type,
4  'GET',
5  () => '/contacts',
6  (arg1, arg2) => ({
7      name: 'Ronald McDonald',
8      details: arg1,
9      deep: {
10          key: arg2,
11      }
12  })
13);
14
15action();

Result

1{
2  "type": "CONTACT",
3  "payload": {
4    "name": "Ronald McDonald",
5    "deep": {}
6  },
7  "meta": {
8    "api": true,
9    "endpoint": "/contacts",
10    "method": "GET",
11    "types": ["CONTACT_GET_REQUEST", "CONTACT_GET_SUCCESS", "CONTACT_GET_FAILURE"]
12  }
13}

Custom Meta Creator Example

View Example

1const type = 'CONTACT';
2const action = createAPIAction(
3  type,
4  'GET',
5  () => '/contacts',
6  null,
7  () => ({
8    extra: 'value',
9    another: 'value',
10  })
11);
12
13action();

Result

1{
2  "type": "CONTACT",
3  "payload": {},
4  "meta": {
5    "extra": "value",
6    "another": "value",
7    "api": true,
8    "endpoint": "/contacts",
9    "method": "GET",
10    "types": ["CONTACT_GET_REQUEST", "CONTACT_GET_SUCCESS", "CONTACT_GET_FAILURE"]
11  }
12}