CODEWITHSUNDEEP
angularreduxngrx
Mateusz Witkowski
Mateusz Witkowski

Reputation: 1746

where should be action dispatched? Angular 4 + ngrx

I need some advice reagarding data flow inside Angular 4 app using ngrx library for state management. Here's some basic "architecture" with nested components:

Container (1)
   |__> Toolbar - few selects to specify which properties of item 
            should be displayed (2)
   |__> Search form - for narrowing displayed items (3)
   |__> List of items - with pagination (4)
         |__> Item * n (5)

Let's assume there's three actions possible (in reality it's more complicated because there's many things user can do with one item): a) load batch of items, b) delete item, c) modify item's status.

There's many questions here about data flow but basically I'm wondering if it's reasonable to dispatch actions b) and c) from inside ItemComponent? I really don't like the idea but the alternative is to send information about delete/modify event from ItemComponent to ListComponent and then to ContainerComponent. So it's chain of input/output that I'd rather avoid.

Question: can ItemComponent be "smart" and dispatch action to the store or is it bad design?

Upvotes: 0

Views: 714

Answers (1)

chaosmonster
chaosmonster

Reputation: 46

Maybe this is not the perfect answer to your question, but you should consider using a service to wrap all the dispatch actions (further reading http://blog.brecht.io/A-scalable-angular2-architecture/). That would help to entangle the components dataflow.

If you don't want to use a service like explained in the article above I would consider it a bad design to do dispatch in the ItemComponent, because this gives a component, that is only about representing one data element, knowledge that should be in a smart container component. about container and presentational components

Upvotes: 2

Related Questions