Architecting Reactive Angular Applications with Redux & NgRx

In this video, we will learn how all asynchronous events can be mapped on a time axis, key events, mouse events, and Ajax data fetching events.

   •  Understand that all async events be one unifying concept, namely, the observable

   •  Understand how the stream of data/events work over a period

In this video, we will learn what it means to “subscribe” and “unsubscribe” to a stream. Furthermore, we will understand that stream and observable, is one and the same term.

   •  Create an observable, to see that we can create it from many different asynchronous sources

   •  Show how to subscribe to an observables event stream

   •  Show how to unsubscribe from an event stream and thereby, understand that we can subscribe/unsubscribe at any point

In this video, we will learn that something asynchronous can start out as, for example, a promise, but can be turned into an observable, and thereby, make it possible to compose it with other observables.

   •  Create an observable and make it wrap around an async concept

   •  Learn that we need to handle data emission, error handling, and clean up

   •  See how everything comes together and realize, you are responsible for the observable contract, if you create one from scratch

Understand how operators are methods that help you control the stream, to emit the data that you want and when you want it.

   •  Use projection and filter operators, and then learn to debug the stream

   •  Introduce marble diagrams as a graphical depiction of what an operator does

Explain how we often want one stream to turn into another type of stream, for example, when building an auto complete feature.

   •  Learn the use of the flatMap operators, to turn key events into Ajax events

   •  Introduce a debounce operator to enhance user experience

   •  Show how we can use an even better operator than flatMap, namely switchMap, that only cares about the latest emitted values. All in all, we learn about three advanced operators to solve a real case in the UI

In this video, we will understand how you need to handle errors in your stream, and make it clear that there is more than one way to do so.

   •  Understand how an unhandled error can completely crash a stream. Learn how we can catch an error and remit the data

   •  Use a retry operator to retry the stream several times

   •  Use the onErrorResumeNext operator, when merging streams, to ignore faulty streams

In this video, we will learn how subjects are both observables and observers. Thus, we cannot only subscribe to them, but also add new data to the stream, when we wish.

   •  Use BehaviorSubject to provide an initial value

   •  Use ReplaySubject to ensure that we don’t lose out on data, regardless of when we start subscribing

In this video, we will learn how to install and setup our store. Furthermore, we will learn how to set state with a reducer, and finally show the data in a component.

   •  Learn which libraries to install, via NPM, and set up the store

   •  Understand how we can use the store service in a component and how we can select the slice of state, we want, and show the data in a component

In this video, we will understand how we send data to the store using the store service and the dispatch method. In doing so, we learn to create messages to send in the form of actions.

   •  Build our reducer to handle both, adding and removing of an item

   •  Target the addition and removal cases in the reducer by dispatching the “correct” type of message from the component

   •  Uncover how the reactive part of the store automatically updates our listeners when we send a message to the store

In this video, we will learn how different constructs can help you make the code more type safe and less error prone. We will also learn how you can select data differently.

   •  Understand action creators and how it makes us type less

   •  Understand that we need to use different selectors for different situations

   •  Lastly, uncover how built-in interfaces in NgRx, help make your code more type safe and secure

In this video, we will learn that we can divide our store state in different modules, thereby creating more order.

   •  Build feature modules and utilize the forFeature method

   •  Select the slice of state we need

   •  Use the utility methods at our disposal, to make selections easier

In this video, we will learn the best practices to follow, when it comes to creating different artefacts needed such as state, reducers, actions, and selectors.

   •  Set up best practice state with forFeature, state interface, and ActionReducerMap

   •  Create a child reducer, if needed, to reduce complexity

   •  Use constant and enum. Make the type unique, and create a selector, using utility methods

In this video, we will learn how to install all the libraries and tools, we need, to make it possible to debug the store.

   •  Learn what npm library we need, and how to configure it in our angular project

   •  Learn what browser plugin we need, where we find it, and how to install it

   •  Demonstrate the debugger tool visual appearance in the browser

In this video, we will learn to debug in different ways, and inspect the message being sent, to understand our current state.

   •  Inspect the message to understand what we tried to do with what data

   •  Use time travel to understand how the current state came about

   •  Simplify debugging by skipping certain messages

In this video, we will learn how we can adjust the number of messages we remember. Furthermore, we will also learn how we need to have two different approaches for development and production.

   •  Use a sanitizer to hide the payload, so we can use debugging in production, without revealing sensitive data

In this video, we will learn that capturing the router state is about capturing meta information around the route like URL, router parameter, and query parameters; so we can restore the apps state at a later point in time.

   •  Install and configure the npm library that we need

   •  Uncover what the router state looks like in a browser

In this video, we will learn what parts the router state consists of like URL, router parameters, query parameters, and thereby, better understand, what we want to save down for later retrieval.

   •  Learn where, on a large route object, the different parts we are interested in, are located

   •  Install a helper library, to help set up for the hydration process

The route object is huge and it is unnecessary to save down all of it, when you only need certain parts. In this video, we will create a custom serializer, that lets us dig out the data we want, and discard the rest.

   •  Learn to locate the data on the route object

   •  Build a serializer function, that digs out the data we need, but also replaces the existing serializer function

   •  Get only the part of the router state we need, to store it to localStorage

Side effects are not considered part of the Redux flow, because they are asynchronous, and needs to be handled differently than synchronous actions. A specific message in the flow can trigger a side effect, and a side effect should send a message to the flow, when it’s done.

   •  Explain what a side effect is, and why we need to handle it differently

   •  Set up and configure the npm library we need

   •  Learn to create a simple effect

The most common side effect is an HTTP. In this video, we will learn how to listen to a specific event, carry out a HTTP call, invoke a success handler, and dispatch the result back into the store.

   •  Create an effect that does an HTTP call and learns a good state pattern for pending data and error states

   •  Define a success handler in the effect

We need to handle errors when doing an effect in HTTP, and we will learn to use the correct operator, so our code does what it is supposed to do.

   •  Define an error handler, and learn to deal with a client, as well as server errors

   •  Learn the difference between switchMap and concatMap

You are repeating yourself a lot in terms of reducers and selectors. In this video, we will install the entity library, use its methods, and look at how data is stored and why.

   •  Understand why we have boilerplate

   •  Install and set up the library from npm

   •  Use the adapter, and its utility methods, to reduce boilerplate

The data stored in the state looks different, when we use the adapter class. In this video, we will write our selectors to convert it, or we can use the built-in selectors.

   •  Understand what the data shape looks like

   •  Create custom made selectors, that convert the data into a displayable format

   •  Use the adapter selectors and see how they do the necessary conversions for us

In this video, we will recap on what the code used to look like, and how the code looks like now with entity library, and use the adapter and its methods.

   •  Show the old data and why it is repetitive

   •  Show the usage of the adapter methods

   •  Summarize why you are better off using entity library

In this video, we will learn to install everything, set everything up, and test it.

   •  Understand the downsides of creating everything manually, and set up your project in app.module.ts

   •  Install everything you need and set everything up

   •  Try out a few schematics

In this video, we will generate schematics for actions, reducers, and containers.

   •  Set up @ngrx /schematics and @ngrx /store

   •  Learn about action schematic and reducer schematic

   •  Inject store service into component

In this video, we will learn to use schematics for effects and entity, and learn about a type of schematics, called features.

   •  Set up and install @ngrx /store, @ngrx /effects, and @ngrx /schematics

   •  Use effects and entity schematics

   •  Learn about features schematics

In this video, we will recap Redux and learn about subjects.

   •  Look at Redux and understand artefacts

   •  Recreate Redux in RxJs

   •  Introduce the BehaviorSubject for doing pub/sub

In this video, we will build Redux with RxJS.

   •  Get a recap on state and stream of changes

   •  Merge these stream of changes

   •  Use the method scan(), in a stream to build our store

In this video, we will improve our Redux implementation, by adding side effects.

   •  Learn what side effects are and when to use them

   •  Update our code

   •  Learn some future improvements, to make our solutions better