Redux in Angular | NgRx Deep Dive | Introduction to State Management

"Join us for a deep dive into ngrx where we will cover how to implement a store, write reducers, create actions, and implement effects. We will show you the ins and outs of how to implement redux in your application.

00:00 - Rocky Mountain Angular, Presented by Briebug
00:45 - Jesse Sanders, CEO, Briebug
01:00 - Overview
01:40 - Why Redux?
02:07 - Install and Configure
02:38 - Example components
06:08 - Organizing Code
11:27 - How Redux works...
14:55 - Defining actions
16:15 - Reducers
18:45 - Avoiding duplicate actions
20:25 - NgRx Effects
24:35 - Smart components vs dumb components
30:10 - example app
33:50 - Two smart components loading the same data?
35:00 - Change detection strategy

Rocky Mountain Angular is Brought to you by Briebug
Briebug provides US-based full-stack application development expertise to enterprise software engineering leaders and their teams that bring trusted guidance, hands-on implementation following best practices, and mature mentorship that levels up development teams.

No other company in the software development industry guarantees their results and stands behind their work like Briebug.

Github

Twitter

Linkedin

Facebook

This was filmed at our March 2017 Rocky Mountain Angular meetup.

#Angular #AngularRedux #NgRx"

[rainmaker]

hi jesse, i have a question. why many ngrx examples are only demo query data? what about crud examples? where can i study ngrx for enterprise application? thanks.

[Iamrahulrsingh]

i am getting property payload not present in action. can you please help me wtih this i am tired trying to learn ngrx now after the update . do have saimple sample app the book app is too vast . thanks

[piq-dgvz]

About the file structure u were talking about I heard that being called "sock drawer structure". So yeah. That doesnt work with big application. Ive noticed that its so much easier if a module has everything it needs.

[waqarmahar]

Do you guys have the code for this example uploaded to github or somewhere

[sbkpilot]

I am looking at the new example app of ngrx 4.x and it seems they changed a bunch of stuff around!

[konasandeep]

hi Jesse, that was a very demo, can you share the sample application which you demoed. I mean the customer application.

[pratapdesigner]

I would like to request you please share this example a code github ya any place

[mfpears]

It doesn't seem very component oriented to say that only one smart component can be interested in certain data. You should be able to drop a component anywhere in an application and provide it with the correct inputs and it should work.

You shouldn't be worried about what data other components want. If that points to a design flaw, then the environment is having too much influence on the component. That makes a more rigid system.

For example, if you have a chat page and a notification icon in the top menu, they might share some data, but one is not inside the other. You could fetch the data at the very root component, but then you eventually have a parent component that just knows everything and gets really bloated.

Apollo has it right with its graphql client. The smart component declares what data it needs, and the system worries about the rest. If multiple components happen to require the same data, who cares?

It seems weird to say that all pages that share any data should actually get the data from a common ancestor component, especially since shared state is one of the things that redux is supposed to make easier.