Updating Resources

Search…
Updating Resources
Redux Resource provides four action types for updating resources asynchronously. They are:
1
"UPDATE_RESOURCES_PENDING"
2
"UPDATE_RESOURCES_FAILED"
3
"UPDATE_RESOURCES_SUCCEEDED"
4
"UPDATE_RESOURCES_IDLE"
Copied!
Each request will always begin with an action with type UPDATE_RESOURCES_PENDING. Then, one of the other three action types will be used to represent the resolution of that request. Use the other action types in the following way:
UPDATE_RESOURCES_FAILED: Use this if the request fails for any reason. This
could be network errors, or any
​HTTP Status Code​
greater than or equal to 400.
UPDATE_RESOURCES_IDLE: Use this when the request is aborted.
UPDATE_RESOURCES_SUCCEEDED: Use this when the request was successful.
Request Objects
Specifying a request key on the actions will create a request object in the store for this request. This object can be used to look up the status of the request.
Although it is recommended that you specify a request key whenever possible, there are some situations when you may not need to when updating resources.
For updates that target a single resource, you typically know the ID being updated upfront. Accordingly, you could use the resource metadata to track the status.
For update requests that return multiple resources, it is typically preferable to specify a request key.
Successful Updates
When an action of type UPDATE_RESOURCES_SUCCEEDED is dispatched, three things will happen:
1.the resources included in the action's resources will be added to the resources section of the resource slice. Existing resources with the same ID will be merged with the new ones. To replace existing resources, rather than merge them, specify mergeResources: false on the action.
2.The metadata for each of the resources specified on the action will be updated with updateStatus: 'SUCCEEDED'. To replace all of the existing meta, rather than merging it, specify mergeMeta: false on the action.
3.When a list is passed, the IDs from the resources array on the action will be added to the list. You may specify mergeListIds: false to replace the existing list instead.
Redux Resource XHR
​Redux Resource XHR provides an action creator that simplifies making CRUD requests. If you'd like to build your own, then that's fine, too. The example below may help.
Example Action Creator
This example shows an action creator to update a single book. It uses the redux-thunk middleware and the library xhr for making requests.
1
import { actionTypes } from 'redux-resource';
2
import xhr from 'xhr';
3
​
4
// `bookDetails` could have the following shape:
5
//
6
// {
7
//   id: 23,
8
//   published: true
9
// }
10
//
11
export default function updateBook(bookDetails) {
12
  return function(dispatch) {
13
    dispatch({
14
      type: actionTypes.UPDATE_RESOURCES_PENDING,
15
      resourceType: 'books',
16
      // You can pass either the whole `bookDetails`, or just the ID. Both work.
17
      // Just be sure to pass the whole object on success, so that the updated
18
      // attributes are persisted to your state tree!
19
      resources: [bookDetails.id],
20
    });
21
​
22
    const req = xhr.patch(
23
      `/books/${bookDetails.id}`,
24
      {
25
        json: bookDetails
26
      },
27
      (err, res, body) => {
28
        if (req.aborted) {
29
          dispatch({
30
            type: actionTypes.UPDATE_RESOURCES_IDLE,
31
            resourceType: 'books',
32
            resources: [bookDetails.id],
33
          });
34
        } else if (err || res.statusCode >= 400) {
35
          dispatch({
36
            type: actionTypes.UPDATE_RESOURCES_FAILED,
37
            resourceType: 'books',
38
            resources: [bookDetails.id],
39
            requestProperties: {
40
              statusCode: res.statusCode 
41
            }
42
          });
43
        } else {
44
          dispatch({
45
            type: actionTypes.UPDATE_RESOURCES_SUCCEEDED,
46
            resourceType: 'books',
47
            resources: [body],
48
            requestProperties: {
49
              statusCode: res.statusCode 
50
            }
51
          });
52
        }
53
      }
54
    );
55
​
56
    return req;
57
  }
58
}
Copied!
Reading Resources
Creating Resources
Last modified 2yr ago
Copy link
Contents
Request Objects
Successful Updates
Redux Resource XHR
Example Action Creator