@ngrx/data - Need help on customization state and actions #3094
Replies: 37 comments 2 replies
-
The issue with the docs is not necessarily that things are missing but that it’s too abstract with links back and forth so you end up missing the “point”. I’m planning on getting more involved in the docs so I’m interested specific pain points with a preference for smaller changes (no one likes it when the supermarket changes where everything is located). That being said I think there needs to be a first class section (mostly a refactor of existing docs) Handling APIs on dealing with the following Handling APIs
*the full topic of pagination in general is likely too big for this section. The answer will end up being, “it depends” and likely belongs in the FAQ section. @hoang-innomizetech I love to hear your feedback on this in particular.
Edit - sorry, I misread above. Following doesn’t address point you were making. Need to think more carefully about error handling though. I’m investigating this.
If all you want is to save the total number of entities that exist and add the entities at same time when a pagination result returns then 3 step I missed this myself and was pipe mapping inside a dataservice and dispatching a custom action to save the total elsewhere in the state. I envisage my proposed Handling APIs > Pagination would make this clearer.
This is likely depends on your use case. For the general case l’m also so stuck on this. My own use case is an exploration of offline patterns. For each potentially failing action like SAVE_ADD_ONE having SAVE_ADD_ONE_OFFLINE_SUCCESS, SAVE_ADD_ONE_OFFLINE_FAIL entity ops, and have a triage in entity effects that decides if we are in online or offline mode and tries to handle actions accordingly. |
Beta Was this translation helpful? Give feedback.
-
|
@AdditionAddict Thank you for the quick reply.
I think we should add more items into the Advanced section so that readers can read more instructions for a certain point. I give you more idea about which items we need, I think I should give you some cases that we need to custom the ngrx/data module:
I also read this page and noticed that it contains some items that I am looking for, but that page isn't completed yet. |
Beta Was this translation helpful? Give feedback.
-
|
@AdditionAddict I also noticed a few issues as below:
I am not sure what is wrong with my setup or this is issues from this library. So could you please take a look and let me know. Thank you |
Beta Was this translation helpful? Give feedback.
-
|
On the second issue as the above, dispatch an undo action will revert entity to the original state, but why we don't just dispatch it by default? Our team implemented our own CRUD store library and they did it. So I am curious why we didn't do it. |
Beta Was this translation helpful? Give feedback.
-
|
@AdditionAddict Regarding my concern about adding custom actions (or Entity Op) for a given entity name. Do you have any guidelines or ideas? Right now I am stuck on the EntityOp, it isn't extendable. If I used hard handcrafted action, how do I can implement reducer that can use existing data entity service as well as implement the effect. |
Beta Was this translation helpful? Give feedback.
-
query many success actions leave the loaded state as it is.
Can you clarify this? What is your error and what version of ngrx data are you using? |
Beta Was this translation helpful? Give feedback.
-
|
On the optimistic issue, I checked the document again and noticed that we have to implement undo action. I just concern why we don't just dispatch undo action by default |
Beta Was this translation helpful? Give feedback.
-
|
@AdditionAddict I am having the same issue as described by @hoang-innomizetech where when I use getByKey, the loaded$ in my store for that given entityCache stays false when it was false. I am using the loaded$ flag to show/hide my component content and in the router resolver to load the data before navigating into the route that requires the data by id. thanks in advance :) |
Beta Was this translation helpful? Give feedback.
-
|
Hello I really like the librery makes so much faster but you cant provide us with documentation on how to add with it custom actions, effects, how to add it to the reducer.. and how to override existing reducers, actions, effects. I think all that is possible but for me someone who just started using it it's to complex I feel lost. If someone has a few minutes MuhamedKarajic is my skype, a bit help would be great! |
Beta Was this translation helpful? Give feedback.
-
it turns out I found where the explanation of this part is. and I totally agree @muhamedkarajic , the documentation is frustrating to follow when trying to understand how to extend and override. |
Beta Was this translation helpful? Give feedback.
-
Please put it I really like the library but it's useless if it's not possible to do this kind of thing. To much heap for nothing, standard requests are not good enough, I have a small app and already 3-4 problems with only 3 services. |
Beta Was this translation helpful? Give feedback.
-
|
I'm in the same boat. |
Beta Was this translation helpful? Give feedback.
-
|
It has been now 29 days.no reply from support. i dont have any other option then to do the states as they intended me to do it. There is a librery Akita I think for anyone who is in this boat this one is better then this ngrx. I'm not here to promote some librery but good competition is here needed. |
Beta Was this translation helpful? Give feedback.
-
|
@muhamedkarajic if you feel that's better for you, feel free to use it. It's not acceptable however to call someone else's hard work crap. Be civil, or get blocked temporarily. |
Beta Was this translation helpful? Give feedback.
-
|
https://www.youtube.com/watch?v=Lu6d_Wt6Cn8 |
Beta Was this translation helpful? Give feedback.
-
|
@brandonroberts Do you have any ETA for v10 release? |
Beta Was this translation helpful? Give feedback.
-
|
@hoang-innomizetech soon 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Any news on this |
Beta Was this translation helpful? Give feedback.
-
|
@muhamedkarajic have you found a way to customize this. |
Beta Was this translation helpful? Give feedback.
-
|
I'm in the same boat here. I'm working on the front-end of an MYMP products with a particular api. For example, instead of so I added an That I was planning on settingswith an action, and consuming somehow in the getAll() call. |
Beta Was this translation helpful? Give feedback.
-
|
try this solution to solve pagination problem example return from backend store state this solution is based on this doc (my entity calls module, do not confuse with the keyword module) steps 1 - create additionalCollectionState on your EntityMetadataMap import { EntityMetadataMap } from '@ngrx/data';
const moduleEntityMetadata: EntityMetadataMap = {
Module: {
additionalCollectionState: {
pageInfo: null
}
},
};2 - overwrite 'PersistenceResultHandler' creating a new class import { Action } from '@ngrx/store';
import { EntityAction, DefaultPersistenceResultHandler } from '@ngrx/data';
export class AdditionalPersistenceResultHandler extends DefaultPersistenceResultHandler {
handleSuccess(originalAction: EntityAction): (data: any) => Action {
const actionHandler = super.handleSuccess(originalAction);
return (data: any) => {
const action = actionHandler.call(this, data);
if (action && data && data.pageInfo) {
(action as any).payload.pageInfo = data.pageInfo;
(action as any).payload.data = data.data;
}
return action;
};
}
}3 - overwrite 'EntityCollectionReducerMethods' creating a new class import { EntityAction, EntityCollection, EntityDefinition, EntityCollectionReducerMethods } from '@ngrx/data';
export class AdditionalEntityCollectionReducerMethods<T> extends EntityCollectionReducerMethods<T> {
constructor(public entityName: string, public definition: EntityDefinition<T>) {
super(entityName, definition);
}
protected queryManySuccess(
collection: EntityCollection<T>,
action: EntityAction<T[]>
): EntityCollection<T> {
const ec = super.queryManySuccess(collection, action);
if ((action.payload as any).pageInfo) {
(ec as any).pageInfo = (action.payload as any).pageInfo;
}
return ec;
}
}4 - Register AdditionalEntityCollectionReducerMethods, to do that, we need to create an AdditionalEntityCollectionReducerMethodFactory import { Injectable } from "@angular/core";
import { EntityDefinitionService, EntityCollectionReducerMethodMap } from '@ngrx/data';
import { AdditionalEntityCollectionReducerMethods } from './entity-collection-reducer-methods';
@Injectable()
export class AdditionalEntityCollectionReducerMethodsFactory {
constructor(private entityDefinitionService: EntityDefinitionService) { }
create<T>(entityName: string): EntityCollectionReducerMethodMap<T> {
const definition = this.entityDefinitionService.getDefinition<T>(entityName);
const methodsClass = new AdditionalEntityCollectionReducerMethods(entityName, definition);
return methodsClass.methods;
}
}5 - set providers in our main/store module providers: [
{
provide: PersistenceResultHandler,
useClass: AdditionalPersistenceResultHandler
},
{
provide: EntityCollectionReducerMethodsFactory,
useClass: AdditionalEntityCollectionReducerMethodsFactory
},
] |
Beta Was this translation helpful? Give feedback.
-
In my use case, I need to replace the whole state in pagination and not merge with the existing collection. In order to do that, I changed a bit the reducer : import { Injectable } from '@angular/core';
import { EntityCollectionReducerMethods, EntityDefinition, EntityCollection, EntityAction, EntityDefinitionService, EntityCollectionReducerMethodMap } from '@ngrx/data';
@Injectable()
export class AdditionalEntityCollectionReducerMethods<T> extends EntityCollectionReducerMethods<T> {
constructor(public entityName: string, public definition: EntityDefinition<T>) {
super(entityName, definition);
}
protected queryManySuccess(collection: EntityCollection<T>, action: EntityAction<T[]>): EntityCollection<T> {
let ec: EntityCollection<T>;
if ((action.payload as any).pagination) {
// If pagination is present in payload, replace the whole collection
ec = super.queryLoadSuccess(collection, action);
// save the foo pagination from action.payload to entityCollection instance
(ec as any).pagination = (action.payload as any).pagination;
} else {
super.queryManySuccess(collection, action);
}
return ec;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
We still need to find a way to customize the EntityOp and actions |
Beta Was this translation helpful? Give feedback.
-
my values do not change |
Beta Was this translation helpful? Give feedback.
-
I used the variable 'pageInfo' as an example, if you want to use it as shown above, check if your api is returning the values in the same pattern and if all steps were correctly performed |
Beta Was this translation helpful? Give feedback.
-
|
@filipemansano |
Beta Was this translation helpful? Give feedback.
-
In my case fiexd: I changed .load to .getWithQuery :-D |
Beta Was this translation helpful? Give feedback.
-
Hello, the same thing happens to me. None of the protected methods in EntityCollectionReducerMethods and DefaultPersistenceResultHandler are executed. Test running the service from the component with getAll and getWithQuery. |
Beta Was this translation helpful? Give feedback.
-
|
@filipemansano how do you get this pageInfo values (selector) ? |
Beta Was this translation helpful? Give feedback.
-
https://ngrx.io/api/data/EntityCollectionServiceBase#selectors%24 |
Beta Was this translation helpful? Give feedback.
-
thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Hello everyone, long time passed. I just wanted to point out that you can use ngrx data for default setup and implement custom services, actions and reducers for more complex scenarious. From my experice so far its best to stick with the boilerplate until we dont have a proven concent. Hope this helps someone to avoid bad choices. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I am trying to apply the @ngrx/data module into my application. But there are a couple of things I am trying to figure out the best way (or right way) to implement custom behavior for my applications. So I want to raise this issue to seek help from the community and NGRX team. I can spend time learning and study but I am not sure whether it complies with NGRX team principal and design best practices. I believe that a lot of people interested in using NGRX modules will also interested in and want to help a well-documented guideline.
Pagination and ability to skip action if entity collection is loaded.
Handling pagination and store query params to the entity cache. Also, we need a way to cancel or skip a certain operation if data is loaded. For example, I want to avoid load entity collections again if it is cached on the entity cache. Maybe we could add a new prop to the EntityActionOptions (i.e. skipIfLoaded).
From my research, I think we need to implement a custom DefaultPersistenceResultHandler (3 steps from this document https://ngrx.io/guide/data/entity-metadata). And then, I have to write more code to custom data service as well as reducer/effect.
Stey by step how to create a custom action
Step by step how to create a new custom action type or entity operation. Almost applications will require custom actions (not only CRUD), so is there any place that I can read and implement it? Should this be a feature for @ngrx/data module? In my research, I knew that I have to create a custom action and dispatch it, but I am not sure what are the remaining steps I need to implement to ensure
Beta Was this translation helpful? Give feedback.
All reactions