Midwest JS

Aspen Payton

Angular & NgRx

This is a hands-on workshop that teaches participants how to structure an Angular application to use NgRx for state management. When I set out to learn NgRx a year ago, I found a lot of high level discussion of the Redux pattern and a variety of very specific code examples, but struggled to find education that laid out the pattern from beginning to end with fully functional examples. That is what I intend to provide with this workshop. We will begin with a starter project and existing HTML. We will set up state for the application, walk through creating a basic action and reducer, wire up the action and reducer in our app, and dispatch the action from a component so we can see it working in the app. From here, we can walk through the pattern again introducing additional complexity by passing a payload into an action and creating an action with an effect. Participants will end the workshop with a simple, but fully functional, application using NgRx. I created this talk as a bootcamp for a small group in my work unit. I used fruit as an example that is relatable to anyone, regardless of their previous work experience. For example, on the first pass we created a "banana app". The store tracked the state of our banana, and we wrote actions to peel the banana and eat the banana. We added a more complex action with an effect to jump forward in time to "rot" the banana. It was a fun way to introduce the topic in a humorous and un-intimidating manner. Full disclosure: I am scheduled to present this topic in a 2 hour format at ng-conf this spring. Not sure if there is any conflict across conferences!