Platform: Recipes/Stories for "beyond the basics" of ngRx

[peterbsmyth]

ngRx follows redux patterns. a document like Immutable Update Patterns does a lot to help ngRx users. The Immutable Update Patterns doc is one of the Recipes the redux community relies on.

ngRx might benefit from redux recipes.

ngRx is not redux. There are Observable patterns for effects, there are strong types in the reducers, there are officially supported Entity patterns that have their own need for understanding. We can make a couple of documents that go through general usage patterns in-depth in a manner that would be like the very successful "recipes" from the redux community.

Anyone can add in thoughts.

Viva la ngRx!

[peterbsmyth]

Here is an example of the type of Recipe that may be included:
Making chained API Calls using @ngrx/Effects

[MattiJarvinen]

Sounds like a good idea.

Start a section called recipes / best practices / examples in the docs and divide it with effects, reducers, actions, meta reducers. This would be the place to share examples from the real apps.

Immutable update patterns should be included almost as is but not linked ( credited though ) since there might be some cases angular + ngrx might handle differently also depending on remote urls to remain the same might be fragile in documentation.

[peterbsmyth]

@brandonroberts @MikeRyanDev any preference on a first step? PR? more examples? What guidance do you have?

[mcblum]

This would be amazing. For us less-seasoned devs the hardest part is often trying to go from the example like INCREMENT_COUNTER to making multiple API calls, dealing with a very complicated domain model, etc... Obviously application design is a lot harder than writing code, but having some solid examples where it's possible to see how a person would deal with more complicated situations using Redux would be such a huge help.

[peterbsmyth]

@mcblum in the world of ngrx there is such a thing as Entity and its a great help with the basic operations of working with reducers. You could check that out as you hit issues with complicated situations

[mcblum]

@peterbsmith2 you know I actually just started using that for our new feature yesterday. It's amazing and now a refactor is definitely in order.

I think part of this just takes time. It's hard to grasp all of the concepts when you begin, but usually all of us are on some sort of deadline to actually get something done. Entity will clean stuff up a lot but it's still the design patterns that strike me as the most difficult. Stupid things like what is the best way to have a set of entities and then have one "active" for editing? How to create a selector for that? How do you handle normalization of data? If a schema has fields and we want to extract fields into its own reducer, is that in the effects? Should I then remove fields from underneath the schema?

This is all my stuff to learn and I don't expect someone to do it for me, but it's the stuff that I've found hardest to grasp and learn.

Appreciate the reply!

[goelinsights]

@peterbsmith2 sounds like a great idea. I have one I could put together on patterns for lazy loading of embedded smart component I'd love to get some feedback on, as I haven't seen that discussed. Let me know if the recipes section gets made and I'd love to contribute.

(I have an image gallery on article pages that is an embedded smart component and therefore not connected to any specific routes but that also pulls from models and other things on a gallery route)...net of it is that you create an additional sharable module (I had /gallery with GalleryModule so I put it in gallery/shared as GallerySharedModule and added it as an import/export to my SharedModule) that has the StoreModule.forFeature and EffectsModule.forFeature so that you get access to store and effects even if the route hasn't loaded.

Took me a while to rationalize my way through, so I figure that kind of thing could be helpful to others (as well as would be super helpful to get feedback on the pattern from the more senior members of the community)

[peterbsmyth]

@goelinsights This gist demonstrates my example Making chained API Calls using @ngrx/Effects
for the recipes. Your example is another great example. There may be more examples out there. With yours and more like that, we can really build a collection of resources. So can you make a gist to contribute?

A collection of recipes contributed by the community will ease the load on @brandonroberts and @MikeRyanDev. With everyone pitching in their lives get easier as far as documenting best practices and advanced use-cases goes.

How does one work with ngrx/entity and deeply nested data from an API response? In redux one would use normalizr. This is just one example of a common problem ngrx developers face. And having a "recipes" section can provide those answers.

This can be very practical!

[goelinsights]

@peterbsmith2 agree there are lots of these. Just went through refactoring my own proprietary apis to flatten/ reduce nesting to follow the smart/dumb component pattern, so it's a mix of recipes and suggested best practices depending on where you control the stack.

[Stephane-Peyroutet]

I agree with the general principle of enhancing the docs with this kind of recipes.
It's been called Stories in the Angular CLI and this has been really helpul to me.
One good example it the lack of information about Normalization and the best to way to interact with nested/relational database (should I use Normalizr or does something exist or is planned in NgRx ?)
In addition to that, I would really like an example about more complex data structure and best practices using Models/View Models with NgRx Store and Selectors.

[mcblum]

Exactly @Stephane-Peyroutet. Obviously no one in the community is saying "why won't you do the work for me" but it is hard when you listen to the podcasts and read various blog posts and articles written by some of the leaders and they all focus on the what but not the how.

I love hearing what people were able to accomplish with this tech but if there are never any implementations shown beyond a counter it's really hard to know exactly how to do it. Nested data is a great example. Currently for us the nested data will often be stored in a different slice of store because if we have users and books, we really want to store the user's books in the books slice rather than the users slice. So to do that we're using effects. Is that right? I have no idea, but I didn't know how else to do it.

[peterbsmyth]

@Stephane-Peyroutet @mcblum the three of us have questions about normalization and nested data.

NgRx has an unused wiki, that could be a good place to start collecting some of these ideas in an organized capacity. Stories is in-line with angular, Recipes is inline with redux. ngRx uses both angular and redux.

[peterbsmyth]

@mcblum aside, very interested to see your example of users and books and the related effects file

[peterbsmyth]

@mcblum I worked updating a nested entity a little tonight and wrote this gist. It may be too incomplete to be broadly useful. Experts are experts though. So you can review it and if it does not make sense to you I can flesh it out further.

[peterbsmyth]

Another possibility for this section, and it may be bloating the idea, would be how to include ngrx in an angular universal app

[peterbsmyth]

@brandonroberts would you think of accepting "story" submissions for an ngrx wiki?

[brandonroberts]

@peterbsmith2 we've discussed this internally before and we're leaning towards building a dedicated site for the docs. The material and issues discussed here would go there instead of the wiki here. It would allow us more flexibility in terms of what content is there, and how we publish the docs. So we still want to capture these ideas here and then formalize the plans to design and build the site.

[Stephane-Peyroutet]

@brandonroberts thank you for the updated thoughts on this topic.
A place to store and propose those ideas sounds good, whether it be a dedicated site or a wiki page.
As @peterbsmith2 stated, one general idea would be about normalization and nested data, in the context of having a SQL/Db backend.
A nice example would be the "standard" customer/order problem (one Customer table, one Order table, one Article table, one Order_Line association table between Order and Article with a quantity field).
With five tables, a few fields and associations, you cover most of the cases on those questions :

• how to retrieve data from multiple tables on an SQL db (normalization, nested data)
• how to store those data in the store (entity)
• how to use models & view models from the store (selectors)

[mcblum]

@Stephane-Peyroutet that's a great example of something that would be extremely helpful.

One thing that we've done because we don't know what else to do is to give each thing a slice of the store. So customers, orders, articles all have a reducer. Then, when you want to select an order you set the idOfSelectedEntity to whatever represents the ID of an order. In order to then fetch customers and articles, you create selectors that say "grab the ID of the selected order from the orders store and grab all available articles and return only those which have an order_id of whatever."

This can cascade all the way down so if you're then looking at a specific article, you can say "grab the id of the selected article and then grab all orders and include only those which contain that article in some way".

I've had reasonable luck with separating everything out when the data is loaded so that the data is normalized. However, there is an absolute ton of boilerplate that you need to make this work.

[peterbsmyth]

@brandonroberts

We have a number of pending thoughts here. There may need to be organization around the format. GitBook is a popular document management library for open source. It's understandable and integrates into repositories for many of our favorite projects (not just Redux). Can you look into it as an option? Can you share other options you would consider?

[peterbsmyth]

To all reading this, since we're a community lets stand up a small standalone gitbook we can contribute as a way to get ideas more organized

[peterbsmyth]

I created an ngrx recipes repo that is connected to gitbook which I'll be updating as days go by. I'm looking for contributions to seed the project (@MattiJarvinen-BA @mcblum @goelinsights).

[perjerz]

There is no example of Action that update Store from service after retrieve response from API.

[peterbsmyth]

@perjerz3434 have you done this?

[MattiJarvinen]

@perjerz3434 You should actually use (Side)Effects for handling calls to async services.

See, https://github.com/UltimateAngular/ngrx-store-effects-app/blob/27-testing-effects/src/products/store/effects/pizzas.effect.ts

[peterbsmyth]

@brandonroberts @MikeRyanDev given the announcement of ngrx.io for documentation is this issue necessary?