Redux Resource Action Creators
This library makes it more convenient to create valid request actions. It helps out in two ways:
  1. 1.
    Remembering the request action types can be difficult
  2. 2.
    Often times, your "start" and "end" actions share many properties, and it can feel like unnecessary
    boilerplate to copy + paste those properties
Unlike Redux Resource XHR, these action creators do not make the requests for you. All this library does is create the actions themselves.

Other Guides

Old Documentation
Migration Guides

Installation

Install redux-resource-action-creators from npm:
npm install redux-resource-action-creators --save
Then, import createActionCreators in your application:
1
import createActionCreators from 'redux-resource-action-creators';
Copied!

Usage

This library has a single export, createActionCreators.

createActionCreators( crudAction, actionDefaults )

Arguments

  1. 1.
    crudAction: (String) The CRUD operation being performed. One of "create", "read", "update", or "delete". This determines the CRUD Action types that are dispatched.
  2. 2.
    actionDefaults (Object): Properties that will be included on each dispatched action. The Request Action guide lists possible options, such as resourceType and resources. You must include resourceType.

Returns

(Object): An object with four methods: pending, succeeded, failed, and idle. These action creators return actions for you, based on the action properties that you provide to them.

Example

1
import createActionCreators from 'redux-resource-action-creators';
2
import store from './store';
3
4
const readActionCreators = createActionCreators('read', {
5
resourceType: 'books',
6
requestKey: 'getHomePageBooks',
7
list: 'homePageBooks',
8
mergeListIds: false
9
});
10
11
store.dispatch(readActionCreators.pending());
12
13
const req = fetchData((err, res, body) => {
14
if (req.aborted) {
15
store.dispatch(readActionCreators.idle());
16
} else if (err) {
17
store.dispatch(readActionCreators.failed());
18
} else {
19
store.dispatch(readActionCreators.succeeded({
20
resources: body
21
}));
22
}
23
});
Copied!
To understand why you might use this library, compare that example versus this common Redux Resource code:
1
import { actionTypes } from 'redux-resource';
2
import store from './store';
3
4
store.dispatch({
5
type: actionTypes.READ_RESOURCES_PENDING,
6
resourceType: 'books',
7
requestKey: 'getHomePageBooks',
8
list: 'homePageBooks'
9
});
10
11
const req = fetchData((err, res, body) => {
12
if (req.aborted) {
13
store.dispatch({
14
type: actionTypes.READ_RESOURCES_NULL,
15
resourceType: 'books',
16
requestKey: 'getHomePageBooks',
17
list: 'homePageBooks'
18
});
19
} else if (err) {
20
store.dispatch({
21
type: actionTypes.READ_RESOURCES_FAILED,
22
resourceType: 'books',
23
requestKey: 'getHomePageBooks',
24
list: 'homePageBooks'
25
});
26
} else {
27
store.dispatch(readActionCreators.succeeded({
28
type: actionTypes.READ_RESOURCES_SUCCEEDED,
29
resourceType: 'books',
30
requestKey: 'getHomePageBooks',
31
list: 'homePageBooks',
32
resources: body
33
}));
34
}
35
});
Copied!
All that this library does is provides a simple pattern to write less, more expressive code. If you'd like, you could get many of the same benefits by defining shared action properties, and then spreading them in your actions:
1
import { actionTypes } from 'redux-resource';
2
import store from './store';
3
4
const actionDefaults = {
5
resourceType: 'books',
6
requestKey: 'getHomePageBooks',
7
list: 'homePageBooks'
8
};
9
10
store.dispatch({
11
...actionDefaults,
12
type: actionTypes.READ_RESOURCES_PENDING,
13
});
14
15
const req = fetchData((err, res, body) => {
16
if (req.aborted) {
17
store.dispatch({
18
...actionDefaults,
19
type: actionTypes.READ_RESOURCES_NULL,
20
});
21
} else if (err) {
22
store.dispatch({
23
...actionDefaults,
24
type: actionTypes.READ_RESOURCES_FAILED,
25
});
26
} else {
27
store.dispatch(readActionCreators.succeeded({
28
...actionDefaults,
29
type: actionTypes.READ_RESOURCES_SUCCEEDED,
30
resources: body
31
}));
32
}
33
});
Copied!