[Question] Pass data through store or component props

[bliitzkrieg]

Is it better to pass the data to components as props using Input() or to just inject the store and grab the data?

It definitely seems easier to use store but I'm not sure what would be more performant. If I lean on my react experience, its faster passing through props but I'm not sure about Angular since its using another observer via Input().

[luchillo17]

Is the app you're making already finished for you to start thinking on performance? is your app that slow?

Early optimization is bad, you sure you need to go that far yet?

Also if not a feature request or bug the standard is go to stack overflow, gitter or the official blog (for this repo it seems gitter is the one).

[luchillo17]

Ok just to try and answer that, let's look at what is involved in both processes:

1. Input binding: It would depend on Angular specific implementation, but i think it works kind of like instantiating an EventEmitter in the parent and passing it to the child with a binding.
2. Store observable: It has a selector that is used to map the state towards the specific piece of information you want from the Store, and that passes through an Observable.

From this point of view they are not that different, however consider this:

If you have that parent component grab that data from Store, then pass that data to child, it means the data has to go through 2 observables (kind of), in such case i think it would be better to get the data directly from the store instead of binding down.

At the end it more or less depends on the use case, but most of the time that optimization is not needed, in my case i decide depending on which makes my life as developer easier.

[joachimprinzbach]

We always pass the data down as properties, and only have the store injected in smart components. The main reason is, that dumb components that only rely on inputs, are easily reusable in other applications that might not use ngrx.

[luchillo17]

@joachimprinzbach Is right, presentation only components (dumb components) are better suited with inputs since it makes them reusable out of the scope of Redux or Ngrx in general.

Most of the time we don't think on performance, but in making the app work correctly and be maintainable.

It would be a whole different story if the app were a game or video editing or video casting software.

[robwormald]

From a code-organization / best-practices point of view, I'd argue that the Smart + Dumb component pattern is the right way to think about this. That's proven to be a nice way to think about your application. It makes components more reusable, easier to test, and generally more portable. Most of the best practices from React/Redux apply to Angular/NgRx apps.

From a performance point of view, there's little difference out of the box. The major benefit comes if you mark your child component as OnPush - this means that change detection only runs for that component if the @Input values change (this is quite similar to React's shouldComponentUpdate ).

[robwormald]

Please check this against NgRx v4, and if it’s still an issue, please reopen on https://github.com/ngrx/platform. Thanks!