Core Concepts
Redux Resource has two concepts: "Resources" and "Requests."
Resources
A resource is an object of data that you interact with in your applications. Typically, applications will have resources of several different "types." For instance, if your web application manages a public library, then you might have two resource types: "books" and "members."
Each individual resource has a unique ID, which differentiates it from other resources of the same type. Resources typically have other attributes, too. Here's an example book resource:
1
{
2
id: '1312',
3
title: 'The Hobbit',
4
releaseYear: 1937,
5
author: 'J.R.R. Tolkien'
6
}
Copied!
The slices contain not just the "raw" resource data, but also other information that help you to manage and organize the data on the client.
There are five pieces within a resource slice:
resourceType: The resource type (such as "books" or "authors")resources: Where the resource's primary attributes are locatedmeta: Additional information about individual resources. You can store informationhere that isn't persisted to a remote server.lists: A place to store and manage ordered arrays of resources.requests: Information about the requests that are modifying this resource type (requestswill be covered in greater detail in the "Requests" section of these guides)
An empty resource slice looks like the following:
1
// "books" resource slice
2
{
3
resourceType: 'books',
4
resources: {},
5
meta: {},
6
lists: {},
7
requests: {}
8
}
Copied!
Resources
In the
resources section of the slice, each key of the object is the resource's ID. This looks like the following:1
// "books" resource type slice
2
{
3
resourceType: 'books',
4
resources: {
5
24: {
6
// Attributes of book 24
7
},
8
100: {
9
// Attributes of book 100
10
}
11
},
12
meta: {},
13
lists: {},
14
requests: {}
15
}
Copied!
This structure makes it convenient to quickly access a resource's attributes if you know its ID.
Resource Metadata
Typically, client-side applications need to store additional information about resources, such as if the resource has been "selected" by a user, or maybe information about the resource that has been input into a form.
Resource metadata is for this purpose. It's any information that is not persisted to a remote server.
In Redux Resource, all metadata is stored on an object. This meta object, like the resources object, has resource IDs as its keys, and has values that are metadata. An example is:
1
// "books" resource type slice
2
{
3
resourceType: 'books',
4
resources: {},
5
meta: {
6
24: {
7
// Metadata for book 24
8
},
9
100: {
10
// Metadata for book 100
11
}
12
},
13
lists: {},
14
requests: {}
15
}
Copied!
Resource Lists
Often, applications need to keep track of ordered groupings of resources. For instance, has a user selected certain books on the interface? Or did you fetch a user's recent book purchases from a server, sorted by purchase date?
In Redux Resource, both of these situations can be handled using resource lists.
Lists in your store are an array of resource IDs. A resource's lists might look like the following:
1
{
2
resourceType: 'books',
3
resources: {},
4
meta: {},
5
lists: {
6
searchResults: [10, 233, 4, 50],
7
shoppingCart: [10, 409],
8
},
9
requests: {}
10
}
Copied!
Redux Resource provides Redux actions for you to create, update, and delete lists.
Requests
The last section of the resource slice is called
requests. This is an object where each key is maps to a request object, described below.Requests
Request objects represent network requests, such as HTTP requests. Like resources, they are stored in the store.
Typically, requests are HTTP requests, but they can represent anything that is asynchronous. The primary characteristic of requests is that they do not occur instantly. They take time to complete, and they don't always succeed.
In Redux Resource, this characteristic of requests is represented as one of four "statuses":
IDLE: the request hasn't begun yetPENDING: the request has started, but has not yet finishedFAILED: the request was unsuccessfulSUCCEEDED: the request was successful
In addition to having a status, a request keeps track of the resources it operated upon.
Requests in Redux Resource are associated with a resource type, which is the primary resource type that is being affected by the request. Accordingly, the requests can be found within that resource's slice, under the
requests key.Within
requests, each key is a "request key," which is a string used to identify that request. A request with the key "readFavoriteBooks" would be stored like the following:1
{
2
resourceType: 'books',
3
resources: {},
4
meta: {},
5
lists: {},
6
requests: {
7
readFavoriteBooks: {
8
requestKey: 'readFavoriteBooks',
9
status: 'SUCCEEDED',
10
// The resources that were affected by this crud action
11
ids: [24, 10, 50]
12
}
13
}
14
}
Copied!
Conclusion
When you use Redux Resource, information about every CRUD operation that you make in your application is stored in your application's state tree.
By storing this information at such a granular level, Redux Resource provides a robust foundation from which you can build truly great user experiences. And you avoid writing a substantial amount of boilerplate code.
Last modified 4yr ago