@ngdux/form 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -6
- package/package.json +13 -3
package/README.md
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
# @ngdux/form
|
|
2
2
|
|
|
3
|
-
The @ngdux/form gives
|
|
3
|
+
The @ngdux/form gives you a full state to simplify how to create, load, save and delete a resource.
|
|
4
|
+
It was created to reduce the ngrx/store boilerplate code
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
npm install @ngdux/form
|
|
4
9
|
|
|
5
10
|
Example:
|
|
6
11
|
|
|
7
|
-
## Option 1
|
|
12
|
+
## Option 1 - Full state
|
|
8
13
|
|
|
9
|
-
|
|
14
|
+
https://github.com/allanartuso/ngdux/tree/master/libs/demo/data-access/properties/src/lib/%2Bstate/property
|
|
15
|
+
|
|
16
|
+
### State
|
|
10
17
|
|
|
11
18
|
```
|
|
12
19
|
import { User, Error } from '.../models';
|
|
@@ -20,7 +27,23 @@ export const {
|
|
|
20
27
|
} = createFormState<User, Error>(USER_FEATURE_KEY);
|
|
21
28
|
```
|
|
22
29
|
|
|
23
|
-
|
|
30
|
+
### Facade
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
import { Injectable } from '@angular/core';
|
|
34
|
+
import { AbstractFormFacade } from '@ngdux/form';
|
|
35
|
+
import { Store } from '@ngrx/store';
|
|
36
|
+
import { userActions, userSelectors } from './user.state';
|
|
37
|
+
|
|
38
|
+
@Injectable()
|
|
39
|
+
export class UserFacade extends AbstractFormFacade<User, Error> {
|
|
40
|
+
constructor(store: Store) {
|
|
41
|
+
super(store, userActions, userSelectors);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Option 2 - Separated creators for actions, reducer and selectors
|
|
24
47
|
|
|
25
48
|
### Actions
|
|
26
49
|
|
|
@@ -28,7 +51,7 @@ export const {
|
|
|
28
51
|
import { createFormActions } from '@ngdux/form';
|
|
29
52
|
import { User, Error } from '.../models';
|
|
30
53
|
|
|
31
|
-
export const
|
|
54
|
+
export const userActions = createFormActions<User, Error>('User');
|
|
32
55
|
```
|
|
33
56
|
|
|
34
57
|
### Reducer
|
|
@@ -57,7 +80,82 @@ import { USER_FEATURE_KEY } from './user.reducer';
|
|
|
57
80
|
|
|
58
81
|
const getState = createFeatureSelector<FormState<User, Error>>(USER_FEATURE_KEY);
|
|
59
82
|
|
|
60
|
-
export const
|
|
83
|
+
export const userSelectors = createFormSelectors(getState);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Facade
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
import { Injectable } from '@angular/core';
|
|
90
|
+
import { AbstractFormFacade } from '@ngdux/form';
|
|
91
|
+
import { Store } from '@ngrx/store';
|
|
92
|
+
import { userActions } from './user.actions';
|
|
93
|
+
import { userSelectors } from './user.selectors';
|
|
94
|
+
|
|
95
|
+
@Injectable()
|
|
96
|
+
export class UserFacade extends AbstractFormFacade<User, Error> {
|
|
97
|
+
constructor(store: Store) {
|
|
98
|
+
super(store, userActions, userSelectors);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Option 3 - Dynamic feature key
|
|
104
|
+
|
|
105
|
+
https://github.com/allanartuso/ngdux/blob/master/libs/demo/data-access/users/src/lib/%2Bstate/user/user-state.service.ts
|
|
106
|
+
|
|
107
|
+
### Reducer manager service
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
import { Injectable } from '@angular/core';
|
|
111
|
+
import { User, Error } from '.../models';
|
|
112
|
+
import { AbstractFormReducerManager } from '@ngdux/form';
|
|
113
|
+
|
|
114
|
+
@Injectable()
|
|
115
|
+
export class UserReducerManager extends AbstractFormReducerManager<User, Error> {}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Facade
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
import { Injectable } from '@angular/core';
|
|
122
|
+
import { AbstractFormFacade } from '@ngdux/form';
|
|
123
|
+
import { Store } from '@ngrx/store';
|
|
124
|
+
import { UserReducerManager } from './user-state.service';
|
|
125
|
+
|
|
126
|
+
@Injectable()
|
|
127
|
+
export class UserFacade extends AbstractFormFacade<User, Error> {
|
|
128
|
+
constructor(store: Store, userReducerManager: UserReducerManager) {
|
|
129
|
+
super(store, userReducerManager.actions, userReducerManager.selectors);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Module
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
import { ModuleWithProviders, NgModule } from '@angular/core';
|
|
139
|
+
import { FORM_FEATURE_KEY } from '@ngdux/form';
|
|
140
|
+
import { UserReducerManager } from './+state/user/user-state.service';
|
|
141
|
+
import { UserFacade } from './+state/user/user.facade';
|
|
142
|
+
|
|
143
|
+
@NgModule({
|
|
144
|
+
providers: [
|
|
145
|
+
UserReducerManager,
|
|
146
|
+
UserFacade
|
|
147
|
+
]
|
|
148
|
+
})
|
|
149
|
+
export class UserModule {
|
|
150
|
+
static config(formFeatureKey: string): ModuleWithProviders<UserModule> {
|
|
151
|
+
return {
|
|
152
|
+
ngModule: UserModule,
|
|
153
|
+
providers: [
|
|
154
|
+
{ provide: FORM_FEATURE_KEY, useValue: formFeatureKey },
|
|
155
|
+
]
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
}
|
|
61
159
|
```
|
|
62
160
|
|
|
63
161
|
## Effects
|
package/package.json
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngdux/form",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git@github.com:allanartuso/ngdux.git",
|
|
7
7
|
"directory": "/libs/ngdux/util/store/form"
|
|
8
8
|
},
|
|
9
9
|
"homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngdux/util/store/form#readme",
|
|
10
|
+
"default": {
|
|
11
|
+
"name": "@ngdux/form",
|
|
12
|
+
"version": "1.1.0",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git@github.com:allanartuso/ngdux.git",
|
|
16
|
+
"directory": "/libs/ngdux/util/store/form"
|
|
17
|
+
},
|
|
18
|
+
"homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngdux/util/store/form#readme"
|
|
19
|
+
},
|
|
10
20
|
"module": "fesm2015/ngdux-form.mjs",
|
|
11
21
|
"es2020": "fesm2020/ngdux-form.mjs",
|
|
12
22
|
"esm2020": "esm2020/ngdux-form.mjs",
|
|
@@ -31,8 +41,8 @@
|
|
|
31
41
|
"tslib": "^2.3.0"
|
|
32
42
|
},
|
|
33
43
|
"peerDependencies": {
|
|
34
|
-
"@ngdux/data-model-common": "1.1.
|
|
44
|
+
"@ngdux/data-model-common": "1.1.1",
|
|
35
45
|
"@angular/core": "15.2.9",
|
|
36
|
-
"@ngdux/store-common": "1.1.
|
|
46
|
+
"@ngdux/store-common": "1.1.1"
|
|
37
47
|
}
|
|
38
48
|
}
|