Skip to content

Commit ee17b8a

Browse files
committed
README update
1 parent 516206e commit ee17b8a

File tree

1 file changed

+146
-17
lines changed

1 file changed

+146
-17
lines changed

README.md

Lines changed: 146 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
redux-actions
1+
redux-actions-api-addon
22
=============
33

4-
API Add on for [Flux Standard Action](https://github.com/acdlite/flux-standard-action) utilities for Redux.
4+
API Addon for [Flux Standard Action](https://github.com/acdlite/flux-standard-action) utilities for Redux.
55

66
```js
77
npm install --save redux-actions
@@ -30,6 +30,7 @@ This add on attemps to solve 2 things:
3030
In order to be FSA Compliant, most of the information is stored in the `meta` object.
3131

3232

33+
# The Simple Way (`{string} endpoint`)
3334

3435
### `createAPIAction(type, method, endpoint, payloadCreator = Identity, ?metaCreator)`
3536

@@ -69,7 +70,7 @@ redux-actions will automatically set ```action.error``` to true.
6970

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

72-
##### GET
73+
### GET
7374
```js
7475
let getItems = createAPIAction('ITEMS', 'GET', '/items' );
7576
getItems()
@@ -82,22 +83,27 @@ there is no need to pass a payload to your action, as its a `GET` request
8283
- `ITEMS_GET_SUCCESS`
8384
- `ITEMS_GET_FAILURE`
8485

85-
##### GET (single)
86-
```js
87-
let getSingleItem = createAPIAction('SINGLE_ITEM', 'GET', '/items' );
88-
getSingleItem(15)
86+
**Sample**
8987

88+
```json
89+
{
90+
type: 'ITEMS',
91+
payload: {},
92+
meta: {
93+
api: true,
94+
method: 'GET',
95+
endpoint: '/items',
96+
types: [
97+
'ITEMS_GET_REQUEST',
98+
'ITEMS_GET_SUCCESS',
99+
'ITEMS_GET_FAILURE'
100+
]
101+
}
102+
}
90103
```
91-
Here, we pass `15` as a parameter to the action, representing a case where we want only 1 item.
92-
It's also important to note that we used a separate key, `SINGLE_ITEM`, to differentiate between
93-
a single and All request.
94104

95-
*Auto Generated Action Types*
96-
- `SINGLE_ITEM_GET_REQUEST`
97-
- `SINGLE_ITEM_GET_SUCCESS`
98-
- `SINGLE_ITEM_GET_FAILURE`
99105

100-
##### POST
106+
### POST
101107

102108
```js
103109
let createItem = createAPIAction('ITEMS', 'POST', '/items' );
@@ -111,7 +117,29 @@ Any data passed as the first parameter will be treated as the payload to be sent
111117
- `ITEMS_POST_SUCCESS`
112118
- `ITEMS_POST_FAILURE`
113119

114-
##### PUT
120+
**Sample**
121+
122+
```json
123+
{
124+
type: 'ITEMS',
125+
payload: {
126+
name: "James Kusachi"
127+
},
128+
meta: {
129+
api: true,
130+
method: 'POST',
131+
endpoint: '/sample',
132+
types: [
133+
'ITEMS_POST_REQUEST',
134+
'ITEMS_POST_SUCCESS',
135+
'ITEMS_POST_FAILURE'
136+
]
137+
}
138+
}
139+
```
140+
141+
142+
### PUT
115143

116144
```js
117145
let updateItem = createAPIAction('ITEMS', 'PUT', '/items' );
@@ -129,7 +157,28 @@ In this case, we are updating primary item `15` with a new object
129157
- `ITEMS_PUT_SUCCESS`
130158
- `ITEMS_PUT_FAILURE`
131159

132-
##### DELETE
160+
**Sample**
161+
162+
```json
163+
{
164+
type: 'ITEMS',
165+
payload: {
166+
name: 'james'
167+
},
168+
meta: {
169+
api: true,
170+
method: 'PUT',
171+
endpoint: '/sample/10',
172+
types: [
173+
'ITEMS_PUT_REQUEST',
174+
'ITEMS_PUT_SUCCESS',
175+
'ITEMS_PUT_FAILURE'
176+
]
177+
}
178+
}
179+
```
180+
181+
### DELETE
133182
```js
134183
let deleteItem = createAPIAction('ITEMS', 'DELETE', '/items' );
135184
updateItem(15);
@@ -143,3 +192,83 @@ No need to pass in any payload data, as that would get dropped anyways because o
143192
- `ITEMS_DELETE_SUCCESS`
144193
- `ITEMS_DELETE_FAILURE`
145194

195+
**Sample**
196+
197+
```json
198+
{
199+
type: 'ITEMS',
200+
payload: {},
201+
meta: {
202+
api: true,
203+
method: 'DELETE',
204+
endpoint: '/sample/5',
205+
types: [
206+
'ITEMS_DELETE_REQUEST',
207+
'ITEMS_DELETE_SUCCESS',
208+
'ITEMS_DELETE_FAILURE'
209+
]
210+
}
211+
}
212+
```
213+
214+
215+
# Advanced (`{function} endpoint`)
216+
217+
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.
218+
219+
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).
220+
221+
For the advanced version, you only need to send the payload, and your endpoint will return dynamically based on your function.
222+
223+
examples:
224+
225+
**GET Example**
226+
227+
```js
228+
const customEndpoint = (p) => {
229+
return `/tester/${p}/mctesterson`;
230+
};
231+
232+
const getItems = createAPIAction(type, 'GET', customEndpoint);
233+
234+
getItems(10); //GET /tester/10/mctesterson
235+
236+
```
237+
238+
**POST Example**
239+
240+
```js
241+
const customEndpoint = (params) => {
242+
return `/user/${params.id}/ronald/${params.name}`;
243+
};
244+
const createItem = createAPIAction(type, 'POST', customEndpoint);
245+
const payload = { id: 10, name: 'james' };
246+
247+
createItem(payload); //POST /user/10/ronald/james
248+
```
249+
250+
**PUT Example**
251+
252+
```js
253+
const customEndpoint = (params) => {
254+
return `/user/${params.id}`;
255+
};
256+
const updateItem = createAPIAction(type, 'PUT', customEndpoint);
257+
const payload = { id: 10, name: 'james' };
258+
259+
updateItem(payload); //PUT /user/10
260+
```
261+
262+
**DELETE Example**
263+
264+
```js
265+
const customEndpoint = ({id, accountID}) => {
266+
return `/user/${id}/account/${accountID}`;
267+
};
268+
const deleteItem = createAPIAction(type, 'DELETE', customEndpoint);
269+
const payload = { id: 10, accountID: 25 };
270+
271+
deleteItem(payload); //DELETE /user/10/account/25
272+
```
273+
274+

0 commit comments

Comments
 (0)