You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: libs/angular/store/README.md
+3-166Lines changed: 3 additions & 166 deletions
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ This package will follow a semver-like format, `major.minor.patch`, in which:
20
20
-`minor`: Introduces new features and (potential) breaking changes
21
21
-`patch`: Introduces bugfixes and minor non-breaking changes
22
22
23
-
For more information about the build process, authors, contributions and issues, we refer to the [ngx-tools](https://github.com/studiohyperdrive/ngx-tools) repository.
23
+
For more information about the build process, authors, contributions and issues, we refer to the [hyperdrive-opensource](https://github.com/studiohyperdrive/hyperdrive-opensource) repository.
24
24
25
25
## Concept
26
26
@@ -30,169 +30,6 @@ With this in mind, our goal is to make this package as flexible as possible. We
30
30
31
31
Because of this approach, our implementation has to take into account these constraints and will therefore deviate from the standard redux implementation.
32
32
33
-
## Implementation
34
-
35
-
### Store utils
36
-
37
-
#### createStoreAssets
38
-
39
-
In order to reduce the boilerplate of actions, reducers and selectors; and in the effort of creating a coherent store setup, NGX-Store uses the `createStoreAssets` util to setup a slice of the store.
40
-
41
-
A store slice can consists of multiple sub-slices, each one representing data we wish to save in the store. This data can either be in the form of an array, for which we use `EntityStoreAssets`; and other primitives like strings, numbers, objects, records, etc. which we save as `BaseStoreAssets`.
42
-
43
-
When using the `createStoreAssets`, we first define a type or interface which will represent the store slice we wish to create. This interface will be used by the util internally and is therefor required. An example of this type would be:
44
-
45
-
```
46
-
type ExampleStoreAssets = {
47
-
channel: BaseStoreAssets<DataType>;
48
-
videos: EntityStoreAssets<DataType>;
49
-
};
50
-
```
51
-
52
-
Once we have this type defined, we can use it in the `createStoreAssets` util and assign the correct generators to each sub-slice. These generators will provide a series of default actions, reducers and selectors which you can use throughout your application.
53
-
54
-
When using the `createBaseStoreAssets` generator, we are presented with the following actions and corresponding reducers:
55
-
| Action ||
56
-
|--|--|
57
-
| set| Sets the provided data in the store |
58
-
| loading| Sets the loading state of provided data in the store |
59
-
| error| Sets the error state of the provided data in the store |
60
-
| clear| Clears the earlier set data from the store |
61
-
| effects.set| Dispatches a trigger for a set effect |
62
-
63
-
On top of that, we get a series of default selectors corresponding with the aforementioned actions.
64
-
| Selector ||
65
-
|--|--|
66
-
| select| Selects the provided data from the store |
67
-
| selectLoading| Selects the loading state of provided data from the store |
68
-
| selectError| Selects the error state of the provided data from the store |
69
-
| selectErrorMessage| Selects the provided error data of the provided data from the store |
70
-
71
-
When using `createEntityStoreAssets`, we use `@ngrx/entity` as a base to save data in array form. We strongly suggest using `EntityStoreAssets` for arrays, as `@ngrx/entity` has several optimized methods to handle arrays.
72
-
73
-
Using `createEntityStoreAssets` will provide you with the following actions and corresponding reducers.
74
-
| Action ||
75
-
|--|--|
76
-
| set| Sets the provided data in the store |
77
-
| add| Adds the provided data to the existing data in the store |
78
-
| update| Updates the provided data in the existing data in the store |
79
-
| delete| Deletes the provided data from the existing data in the store |
80
-
| loading| Sets the loading state of provided data in the store |
81
-
| error| Sets the error state of the provided data in the store |
82
-
| clear| Clears the earlier set data from the store |
83
-
| effects.set| Dispatches a trigger for a set effect |
84
-
| effects.add| Dispatches a trigger for an add effect |
85
-
| effects.delete| Dispatches a trigger for a delete effect |
86
-
| effects.update| Dispatches a trigger for an update effect |
87
-
88
-
On top of the provided actions and reducers, the util also provides the following selectors.
| selectAll | Selects the provided data from the store |
93
-
| selectLoading | Selects the loading state of provided data from the store |
94
-
| selectError | Selects the error state of the provided data from the store |
95
-
| selectErrorMessage | Selects the provided error data of the provided data from the store |
96
-
97
-
#### Effects
98
-
99
-
##### Actions
100
-
101
-
To support `@ngrx-effects` the generator automatically generates a series of actions that can be used to handle effects. These can be found under the `effects` property, and match the `set, add, update` and `delete` actions.
102
-
103
-
In order to define the type of the payload of the effect actions, we can pass a secondary type to both the `BaseStoreAssets` and `EntityStoreAssets` (and their respective generators).
As additional support to effects, the package provides a `handleEffect` operator which will automatically take care of any of the provided actions. By defining which sub-slice we wish to use, the action we wish to handle and the corresponding data source, the `handleEffect` operator will perform all the necessary actions required.
An additional util that works in tandem with the aforementioned store assets is the `dispatchDataToStore` util. Using the assets, the util will automatically handle the loading and error state of the provided data.
142
-
143
-
A short example can be found here
144
-
145
-
```
146
-
public getChannel(): Observable<DataType> {
147
-
return dispatchDataToStore(
148
-
actions.channel,
149
-
this.httpClient.get<DataType>('test'),
150
-
this.store
151
-
);
152
-
}
153
-
```
154
-
155
-
The util returns an Observable for easy further chaining throughout the application.
156
-
157
-
#### StoreService
158
-
159
-
Just as the aforementioned `dispatchDataToStore` util, the `StoreService` abstraction works best in tandem with the `createStoreAssets` util.
160
-
161
-
This abstraction provides easy access to the selectors that were generated by the assets. These are aimed to reduce the boilerplate and create a coherent store setup throughout your entire application. By passing the selector object to the methods, the abstraction will automatically handle the selection.
| selectFromStore | Selects the provided data from the store |
166
-
| selectLoadingFromStore | Selects the loading state of provided data from the store |
167
-
| selectErrorFromStore | Selects the error state of the provided data from the store |
168
-
| selectErrorMessageFromStore | Selects the provided error data of the provided data from the store |
169
-
170
-
On top of that, the `StoreService` can automatically generate observables for each sub-slice in the provided store. By providing the store interface to the `StoreService` via generics and passing the generated selectors to the constructor, a state object is generated including all the necessary observables.
// Contains: isCompleted$, isCompletedLoading$, isCompletedError$ and isCompletedErrorMessage$
197
-
```
33
+
## Documentation
198
34
35
+
To find more information regarding this package, we refer to [our documentation platform](https://open-source.studiohyperdrive.be/docs/angular/store/introduction).
0 commit comments