Learn the basic concepts and design patterns behind Redux and NgRx store. I will show you how to build a basic Redux app with Angular4 from scratch.

Full Lesson: https://angularfirebase.com/lessons/angular-ngrx-redux-starter-guide/

Demo App: https://github.com/codediodeio/ngrx-fire

NgRx: https://github.com/ngrx
2024-02-04T08:10:29.417Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
94ef6317-13fa-42c2-8352-965b89fbdb90
2c26cad60ea840a2b5f98966da4961de6f556845a37e699996afa5aa0bf90e34
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Redux is a design pattern that keeps all application data in a single JavaScript object.
This gives you a predictable global data state at any given point in time.
This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library.
In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX.
Let's start by looking at the high level principles of Redux.
So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data.
In Redux, the only way to change the state is by dispatching an action.
Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object.
It's important to note that the state is immutable, meaning it can't be changed directly.
It has to be copied over to a whole brand new state.
The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux.
Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less.
In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application.
This means that all of our components and services will be sharing the same data at any given point in time.
Now let's start building a brand new ngrx app.
1st, run ng new and then npm install ngrx/store.
I'm going to start with the most simple example possible where our entire application state is represented by a single string.
Then we'll create 2 different actions to translate the string into Spanish in French.
First, let's go into the app module and import ngrx.
I'm also importing a reducer function, which we'll create in the next step.
Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer.
Now let's go ahead and build this reducer function.
We import the action interface from ngrx, then we export a function that takes a state and an action as arguments.
The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make.
We can handle this logic with a switch statement that takes the action type as the argument.
Then we set up different cases for different actions, which are all caps by convention.
And then since our application state is just a string, we can just return a brand new string.
We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript.
With that done, let's go to the App component and import the ngrx store as well as an RxJS observable.
The NGRX store works just like an Angular service.
We can inject it into our components to share a single source of data.
When using store, you need an interface that will define your app state.
So here we just have a message that's a string, so a simple interface there.
Then when we add the store to the constructor, we pass that app state interface to it.
Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe.
So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data.
To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform.
Form.
Now we can go into the app component HTML, and we can unwrap the observable using the async pipe.
Then we can take our dispatch functions and bind them to the click event on a couple buttons.
Then inside the app, we can see that we get an initial state of hello, world.
And when we click Spanish or French, it translates the message to the new state.
So that's a bare minimum example of NGRX.
Now let's build something a little more complex.
The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state.
Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata.
Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data.
Then create a new file called post actions dotts.
This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface.
But first, we'll export constants that represent each action in all caps by convention.
So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above.
To send data with this action, we need to define a constructor that has the payload property.
In this example, it's a type string, but it could be any type of JavaScript object you wanna send here.
The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor.
As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files.
Now let's build a new post reducer to handle this more complex data.
We can define the action type to correspond to the post actions that we just defined.
Then we can set some default values for the post so it doesn't appear blank when we first navigate to it.
As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself.
An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data.
Object assign will build a new object from left to right, so any data farther to the right will override the data on the left.
Now let's put this helper to use in the reducer function.
Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app.
Then we create a switch statement with the action type.
And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined.
And that will override the text property on the current state.
For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number.
So we take the value of the current state and then we increment it by 1.
And our final action will reset the post to its default values.
In that case we can just return the default state object we defined above.
Now let's refactor our app component.
We're going to import ngrxstore as well as our post actions and our post model.
Then we can tell our AppState interface to adhere to the post model.
From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML.
And then when we inject the store, we give it the app state type.
To get the post as an observable, we just call store dot select post.
When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object.
For the edit text action, we pass the data payload which is the text in the form in the HTML.
And then we can create additional event handlers for all of our other actions as well.
Then we can bind these to various events in the HTML itself.
First, we will subscribe to the post observable and set a template variable as the letter p.
And we can just call p dot text for the title and then p.
Likes to represent the votes.
We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title.
That form text is the actual data payload that goes to the reducer function.
Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI.
Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging.
There's a Chrome plugin called Redux DevTools which is compatible with NGRX.
You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store.
Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time.
It gives you a time lapse history of how your data changes throughout the application.
This is incredibly useful for debugging and is probably the most important feature of Redux in general.
That's it for NGRX store basics.
In the next video, we're going to cover NGRX effects to handle real time data from Firebase.
If this video helped you, please like and subscribe.
And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com.
Thanks for watching, and I'll see you soon.

Speaker 0: Redux is a design pattern that keeps all application data in a single JavaScript object. This gives you a predictable global data state at any given point in time. This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library. In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX. Let's start by looking at the high level principles of Redux.

So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data. In Redux, the only way to change the state is by dispatching an action. Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object. It's important to note that the state is immutable, meaning it can't be changed directly. It has to be copied over to a whole brand new state.

The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux. Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less. In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application. This means that all of our components and services will be sharing the same data at any given point in time. Now let's start building a brand new ngrx app.

1st, run ng new and then npm install ngrx/store. I'm going to start with the most simple example possible where our entire application state is represented by a single string. Then we'll create 2 different actions to translate the string into Spanish in French. First, let's go into the app module and import ngrx. I'm also importing a reducer function, which we'll create in the next step.

Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer. Now let's go ahead and build this reducer function. We import the action interface from ngrx, then we export a function that takes a state and an action as arguments. The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make. We can handle this logic with a switch statement that takes the action type as the argument.

Then we set up different cases for different actions, which are all caps by convention. And then since our application state is just a string, we can just return a brand new string. We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript. With that done, let's go to the App component and import the ngrx store as well as an RxJS observable. The NGRX store works just like an Angular service.

We can inject it into our components to share a single source of data. When using store, you need an interface that will define your app state. So here we just have a message that's a string, so a simple interface there. Then when we add the store to the constructor, we pass that app state interface to it. Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe.

So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data. To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform. Form. Now we can go into the app component HTML, and we can unwrap the observable using the async pipe. Then we can take our dispatch functions and bind them to the click event on a couple buttons.

Then inside the app, we can see that we get an initial state of hello, world. And when we click Spanish or French, it translates the message to the new state. So that's a bare minimum example of NGRX. Now let's build something a little more complex. The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state.

Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata. Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data. Then create a new file called post actions dotts. This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface. But first, we'll export constants that represent each action in all caps by convention.

So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above. To send data with this action, we need to define a constructor that has the payload property. In this example, it's a type string, but it could be any type of JavaScript object you wanna send here. The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor. As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files.

Now let's build a new post reducer to handle this more complex data. We can define the action type to correspond to the post actions that we just defined. Then we can set some default values for the post so it doesn't appear blank when we first navigate to it. As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself. An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data.

Object assign will build a new object from left to right, so any data farther to the right will override the data on the left. Now let's put this helper to use in the reducer function. Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app. Then we create a switch statement with the action type. And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined.

And that will override the text property on the current state. For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number. So we take the value of the current state and then we increment it by 1. And our final action will reset the post to its default values. In that case we can just return the default state object we defined above.

Now let's refactor our app component. We're going to import ngrxstore as well as our post actions and our post model. Then we can tell our AppState interface to adhere to the post model. From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML. And then when we inject the store, we give it the app state type.

To get the post as an observable, we just call store dot select post. When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object. For the edit text action, we pass the data payload which is the text in the form in the HTML. And then we can create additional event handlers for all of our other actions as well. Then we can bind these to various events in the HTML itself.

First, we will subscribe to the post observable and set a template variable as the letter p. And we can just call p dot text for the title and then p. Likes to represent the votes. We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title. That form text is the actual data payload that goes to the reducer function.

Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI. Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging. There's a Chrome plugin called Redux DevTools which is compatible with NGRX. You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store. Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time.

It gives you a time lapse history of how your data changes throughout the application. This is incredibly useful for debugging and is probably the most important feature of Redux in general. That's it for NGRX store basics. In the next video, we're going to cover NGRX effects to handle real time data from Firebase. If this video helped you, please like and subscribe.

And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
Redux is a design pattern that keeps all application data in a single JavaScript object. This gives you a predictable global data state at any given point in time. This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library. In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX. Let's start by looking at the high level principles of Redux.
So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data. In Redux, the only way to change the state is by dispatching an action. Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object.
systems
It's important to note that the state is immutable, meaning it can't be changed directly. It has to be copied over to a whole brand new state. The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux. Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less. In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application. This means that all of our components and services will be sharing the same data at any given point in time. Now let's start building a brand new ngrx app.
data management
databases
data
policy
1st, run ng new and then npm install ngrx/store. I'm going to start with the most simple example possible where our entire application state is represented by a single string. Then we'll create 2 different actions to translate the string into Spanish in French. First, let's go into the app module and import ngrx. I'm also importing a reducer function, which we'll create in the next step. Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer. Now let's go ahead and build this reducer function. We import the action interface from ngrx, then we export a function that takes a state and an action as arguments. The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make.
We can handle this logic with a switch statement that takes the action type as the argument. Then we set up different cases for different actions, which are all caps by convention. And then since our application state is just a string, we can just return a brand new string.
logic
logical reasoning
We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript. With that done, let's go to the App component and import the ngrx store as well as an RxJS observable. The NGRX store works just like an Angular service.
We can inject it into our components to share a single source of data. When using store, you need an interface that will define your app state. So here we just have a message that's a string, so a simple interface there. Then when we add the store to the constructor, we pass that app state interface to it. Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe.
programming
So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data. To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform. Form.
operations
Now we can go into the app component HTML, and we can unwrap the observable using the async pipe. Then we can take our dispatch functions and bind them to the click event on a couple buttons. Then inside the app, we can see that we get an initial state of hello, world. And when we click Spanish or French, it translates the message to the new state. So that's a bare minimum example of NGRX. Now let's build something a little more complex. The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state. Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata. Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data. Then create a new file called post actions dotts. This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface. But first, we'll export constants that represent each action in all caps by convention. So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above. To send data with this action, we need to define a constructor that has the payload property. In this example, it's a type string, but it could be any type of JavaScript object you wanna send here. The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor. As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files. Now let's build a new post reducer to handle this more complex data. We can define the action type to correspond to the post actions that we just defined. Then we can set some default values for the post so it doesn't appear blank when we first navigate to it. As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself. An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data. Object assign will build a new object from left to right, so any data farther to the right will override the data on the left. Now let's put this helper to use in the reducer function. Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app. Then we create a switch statement with the action type. And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined. And that will override the text property on the current state. For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number. So we take the value of the current state and then we increment it by 1. And our final action will reset the post to its default values. In that case we can just return the default state object we defined above. Now let's refactor our app component. We're going to import ngrxstore as well as our post actions and our post model. Then we can tell our AppState interface to adhere to the post model. From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML. And then when we inject the store, we give it the app state type. To get the post as an observable, we just call store dot select post. When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object. For the edit text action, we pass the data payload which is the text in the form in the HTML. And then we can create additional event handlers for all of our other actions as well. Then we can bind these to various events in the HTML itself.
First, we will subscribe to the post observable and set a template variable as the letter p. And we can just call p dot text for the title and then p. Likes to represent the votes. We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title. That form text is the actual data payload that goes to the reducer function.
voting
Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI. Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging. There's a Chrome plugin called Redux DevTools which is compatible with NGRX. You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store. Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time. It gives you a time lapse history of how your data changes throughout the application. This is incredibly useful for debugging and is probably the most important feature of Redux in general. That's it for NGRX store basics. In the next video, we're going to cover NGRX effects to handle real time data from Firebase. If this video helped you, please like and subscribe. And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
Redux is a design pattern that keeps all application data in a single JavaScript object. This gives you a predictable global data state at any given point in time. This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library. In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX. Let's start by looking at the high level principles of Redux. So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data. In Redux, the only way to change the state is by dispatching an action. Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object. It's important to note that the state is immutable, meaning it can't be changed directly. It has to be copied over to a whole brand new state. The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux. Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less. In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application. This means that all of our components and services will be sharing the same data at any given point in time. Now let's start building a brand new ngrx app. 1st, run ng new and then npm install ngrx/store. I'm going to start with the most simple example possible where our entire application state is represented by a single string. Then we'll create 2 different actions to translate the string into Spanish in French. First, let's go into the app module and import ngrx. I'm also importing a reducer function, which we'll create in the next step. Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer. Now let's go ahead and build this reducer function. We import the action interface from ngrx, then we export a function that takes a state and an action as arguments. The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make. We can handle this logic with a switch statement that takes the action type as the argument. Then we set up different cases for different actions, which are all caps by convention. And then since our application state is just a string, we can just return a brand new string. We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript. With that done, let's go to the App component and import the ngrx store as well as an RxJS observable. The NGRX store works just like an Angular service. We can inject it into our components to share a single source of data. When using store, you need an interface that will define your app state. So here we just have a message that's a string, so a simple interface there. Then when we add the store to the constructor, we pass that app state interface to it. Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe. So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data. To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform. Form. Now we can go into the app component HTML, and we can unwrap the observable using the async pipe. Then we can take our dispatch functions and bind them to the click event on a couple buttons. Then inside the app, we can see that we get an initial state of hello, world. And when we click Spanish or French, it translates the message to the new state. So that's a bare minimum example of NGRX. Now let's build something a little more complex. The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state. Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata. Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data. Then create a new file called post actions dotts. This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface. But first, we'll export constants that represent each action in all caps by convention. So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above. To send data with this action, we need to define a constructor that has the payload property. In this example, it's a type string, but it could be any type of JavaScript object you wanna send here. The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor. As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files. Now let's build a new post reducer to handle this more complex data. We can define the action type to correspond to the post actions that we just defined. Then we can set some default values for the post so it doesn't appear blank when we first navigate to it. As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself. An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data. Object assign will build a new object from left to right, so any data farther to the right will override the data on the left. Now let's put this helper to use in the reducer function. Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app. Then we create a switch statement with the action type. And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined. And that will override the text property on the current state. For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number. So we take the value of the current state and then we increment it by 1. And our final action will reset the post to its default values. In that case we can just return the default state object we defined above. Now let's refactor our app component. We're going to import ngrxstore as well as our post actions and our post model. Then we can tell our AppState interface to adhere to the post model. From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML. And then when we inject the store, we give it the app state type. To get the post as an observable, we just call store dot select post. When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object. For the edit text action, we pass the data payload which is the text in the form in the HTML. And then we can create additional event handlers for all of our other actions as well. Then we can bind these to various events in the HTML itself. First, we will subscribe to the post observable and set a template variable as the letter p. And we can just call p dot text for the title and then p. Likes to represent the votes. We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title. That form text is the actual data payload that goes to the reducer function. Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI. Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging. There's a Chrome plugin called Redux DevTools which is compatible with NGRX. You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store. Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time. It gives you a time lapse history of how your data changes throughout the application. This is incredibly useful for debugging and is probably the most important feature of Redux in general. That's it for NGRX store basics. In the next video, we're going to cover NGRX effects to handle real time data from Firebase. If this video helped you, please like and subscribe. And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
Redux
redux
is
is
a
a
design
design
pattern
pattern
that
that
keeps
keeps
all
all
application
application
data
data
in
in
a
a
single
single
JavaScript
javascript
object.
object
This
this
gives
gives
you
you
a
a
predictable
predictable
global
global
data
data
state
state
at
at
any
any
given
given
point
point
in
in
time.
time
This
this
technique
technique
is
is
most
most
popular
popular
in
in
React
react
apps,
apps
but
but
it
it
can
can
also
also
be
be
applied
applied
to
to
Angular
angular
apps
apps
with
with
a
a
library
library
called
called
NGRX,
ngrx
which
which
uses
uses
Redux
redux
principles
principles
with
with
RxJS
rxjs
as
as
the
the
underlying
underlying
library.
library
In
in
this
this
episode
episode
I'm
i'm
gonna
gonna
cover
cover
the
the
basics
basics
of
of
Redux
redux
and
and
then
then
we'll
we'll
build
build
an
an
Angular
angular
app
app
from
from
scratch
scratch
using
using
NGRX.
ngrx
Let's
let's
start
start
by
by
looking
looking
at
at
the
the
high
high
level
level
principles
principles
of
of
Redux.
redux
So
so
we
we
have
have
a
a
user
user
interface
interface
that
that
is
is
displaying
displaying
some
some
data,
data
then
then
the
the
user
user
performs
performs
an
an
action
action
that
that
will
will
change
change
the
the
state
state
of
of
the
the
data.
data
In
in
Redux,
redux
the
the
only
only
way
way
to
to
change
change
the
the
state
state
is
is
by
by
dispatching
dispatching
an
an
action.
action
Once
once
an
an
action
action
has
has
been
been
dispatched,
dispatched
it
it
will
will
go
go
to
to
a
a
reducer
reducer
function,
function
which
which
will
will
copy
copy
the
the
current
current
state
state
of
of
the
the
application
application
along
along
with
with
any
any
data
data
changes
changes
to
to
a
a
new
new
JavaScript
javascript
object.
object
It's
it's
important
important
to
to
note
note
that
that
the
the
state
state
is
is
immutable,
immutable
meaning
meaning
it
it
can't
can't
be
be
changed
changed
directly.
directly
It
it
has
has
to
to
be
be
copied
copied
over
over
to
to
a
a
whole
whole
brand
brand
new
new
state.
state
The
the
reason
reason
for
for
this
this
is
is
it
it
gives
gives
us
us
a
a
predictable
predictable
tree
tree
of
of
state
state
changes
changes
that
that
we
we
can
can
use
use
to
to
debug
debug
an
an
application,
application
and
and
that's
that's
really
really
the
the
main
main
benefit
benefit
of
of
Redux.
redux
Once
once
the
the
reducer
reducer
has
has
created
created
the
the
new
new
state,
state
it
it
gets
gets
saved
saved
in
in
a
a
data
data
store,
store
which
which
can
can
be
be
thought
thought
of
of
as
as
a
a
client
client
side
side
database
database
more
more
or
or
less.
less
In
in
n
n
g
g
r
r
x,
x
we
we
treat
treat
this
this
data
data
store
store
as
as
an
an
observable
observable
so
so
we
we
can
can
subscribe
subscribe
to
to
it
it
from
from
anywhere
anywhere
in
in
the
the
application.
application
This
this
means
means
that
that
all
all
of
of
our
our
components
components
and
and
services
services
will
will
be
be
sharing
sharing
the
the
same
same
data
data
at
at
any
any
given
given
point
point
in
in
time.
time
Now
now
let's
let's
start
start
building
building
a
a
brand
brand
new
new
ngrx
ngrx
app.
app
1st,
1st
run
run
ng
ng
new
new
and
and
then
then
npm
npm
install
install
ngrx/store.
ngrx/store
I'm
i'm
going
going
to
to
start
start
with
with
the
the
most
most
simple
simple
example
example
possible
possible
where
where
our
our
entire
entire
application
application
state
state
is
is
represented
represented
by
by
a
a
single
single
string.
string
Then
then
we'll
we'll
create
create
2
2
different
different
actions
actions
to
to
translate
translate
the
the
string
string
into
into
Spanish
spanish
in
in
French.
french
First,
first
let's
let's
go
go
into
into
the
the
app
app
module
module
and
and
import
import
ngrx.
ngrx
I'm
i'm
also
also
importing
importing
a
a
reducer
reducer
function,
function
which
which
we'll
we'll
create
create
in
in
the
the
next
next
step.
step
Then
then
in
in
the
the
imports
imports
metadata,
metadata
add
add
store
store
module
module
for
for
root,
root
and
and
then
then
we'll
we'll
add
add
a
a
key
key
message
message
with
with
the
the
simple
simple
reducer.
reducer
Now
now
let's
let's
go
go
ahead
ahead
and
and
build
build
this
this
reducer
reducer
function.
function
We
we
import
import
the
the
action
action
interface
interface
from
from
ngrx,
ngrx
then
then
we
we
export
export
a
a
function
function
that
that
takes
takes
a
a
state
state
and
and
an
an
action
action
as
as
arguments.
arguments
The
the
purpose
purpose
of
of
this
this
function
function
is
is
to
to
take
take
the
the
current
current
state
state
and
and
copy
copy
it
it
over
over
to
to
the
the
new
new
state
state
based
based
on
on
whatever
whatever
changes
changes
the
the
action
action
is
is
trying
trying
to
to
make.
make
We
we
can
can
handle
handle
this
this
logic
logic
with
with
a
a
switch
switch
statement
statement
that
that
takes
takes
the
the
action
action
type
type
as
as
the
the
argument.
argument
Then
then
we
we
set
set
up
up
different
different
cases
cases
for
for
different
different
actions,
actions
which
which
are
are
all
all
caps
caps
by
by
convention.
convention
And
and
then
then
since
since
our
our
application
application
state
state
is
is
just
just
a
a
string,
string
we
we
can
can
just
just
return
return
a
a
brand
brand
new
new
string.
string
We're
we're
going
going
to
to
refactor
refactor
this
this
later
later
in
in
the
the
video
video
to
to
use
use
a
a
strong
strong
typed
typed
JavaScript
javascript
object
object
with
with
TypeScript.
typescript
With
with
that
that
done,
done
let's
let's
go
go
to
to
the
the
App
app
component
component
and
and
import
import
the
the
ngrx
ngrx
store
store
as
as
well
well
as
as
an
an
RxJS
rxjs
observable.
observable
The
the
NGRX
ngrx
store
store
works
works
just
just
like
like
an
an
Angular
angular
service.
service
We
we
can
can
inject
inject
it
it
into
into
our
our
components
components
to
to
share
share
a
a
single
single
source
source
of
of
data.
data
When
when
using
using
store,
store
you
you
need
need
an
an
interface
interface
that
that
will
will
define
define
your
your
app
app
state.
state
So
so
here
here
we
we
just
just
have
have
a
a
message
message
that's
that's
a
a
string,
string
so
so
a
a
simple
simple
interface
interface
there.
there
Then
then
when
when
we
we
add
add
the
the
store
store
to
to
the
the
constructor,
constructor
we
we
pass
pass
that
that
app
app
state
state
interface
interface
to
to
it.
it
Then
then
we
we
can
can
retrieve
retrieve
data
data
from
from
the
the
store
store
by
by
calling
calling
store
store
dot
dot
select
select
and
and
the
the
object
object
or
or
in
in
this
this
case,
case
the
the
string
string
that
that
we
we
wanna
wanna
observe.
observe
So
so
now
now
that
that
we're
we're
observing
observing
our
our
app
app
state,
state
we
we
just
just
need
need
a
a
couple
couple
functions
functions
to
to
send
send
actions
actions
to
to
the
the
reducer
reducer
function
function
to
to
change
change
this
this
data.
data
To
to
handle
handle
that,
that
we
we
call
call
store
store
dot
dot
dispatch
dispatch
and
and
pass
pass
it
it
an
an
object
object
with
with
a
a
type
type
that
that
represents
represents
the
the
action
action
we're
we're
trying
trying
to
to
perform.
perform
Form.
form
Now
now
we
we
can
can
go
go
into
into
the
the
app
app
component
component
HTML,
html
and
and
we
we
can
can
unwrap
unwrap
the
the
observable
observable
using
using
the
the
async
async
pipe.
pipe
Then
then
we
we
can
can
take
take
our
our
dispatch
dispatch
functions
functions
and
and
bind
bind
them
them
to
to
the
the
click
click
event
event
on
on
a
a
couple
couple
buttons.
buttons
Then
then
inside
inside
the
the
app,
app
we
we
can
can
see
see
that
that
we
we
get
get
an
an
initial
initial
state
state
of
of
hello,
hello
world.
world
And
and
when
when
we
we
click
click
Spanish
spanish
or
or
French,
french
it
it
translates
translates
the
the
message
message
to
to
the
the
new
new
state.
state
So
so
that's
that's
a
a
bare
bare
minimum
minimum
example
example
of
of
NGRX.
ngrx
Now
now
let's
let's
build
build
something
something
a
a
little
little
more
more
complex.
complex
The
the
updated
updated
app
app
is
is
going
going
to
to
use
use
a
a
post
post
object
object
that
that
can
can
be
be
upvoted
upvoted
or
or
downvoted,
downvoted
and
and
we
we
can
can
also
also
change
change
the
the
title
title
and
and
reset
reset
it
it
to
to
the
the
default
default
state.
state
Then
then
let's
let's
go
go
back
back
to
to
the
the
app
app
module
module
and
and
we'll
we'll
import
import
a
a
new
new
post
post
reducer
reducer
and
and
then
then
we'll
we'll
add
add
that
that
to
to
the
the
store
store
module
module
metadata.
metadata
Then
then
we'll
we'll
create
create
a
a
dedicated
dedicated
model
model
for
for
our
our
post
post
which
which
is
is
nothing
nothing
more
more
than
than
an
an
interface
interface
with
with
the
the
properties
properties
on
on
our
our
data.
data
Then
then
create
create
a
a
new
new
file
file
called
called
post
post
actions
actions
dotts.
dotts
This
this
time
time
we
we
wanna
wanna
send
send
data
data
along
along
with
with
our
our
actions,
actions
so
so
we'll
we'll
define
define
each
each
one
one
as
as
its
its
own
own
class
class
that
that
implements
implements
the
the
action
action
interface.
interface
But
but
first,
first
we'll
we'll
export
export
constants
constants
that
that
represent
represent
each
each
action
action
in
in
all
all
caps
caps
by
by
convention.
convention
So
so
for
for
the
the
edit
edit
text
text
class,
class
we
we
will
will
implement
implement
the
the
action
action
interface,
interface
and
and
then
then
we'll
we'll
create
create
a
a
read
read
only
only
type
type
that
that
corresponds
corresponds
to
to
the
the
action
action
constant
constant
that
that
we
we
defined
defined
above.
above
To
to
send
send
data
data
with
with
this
this
action,
action
we
we
need
need
to
to
define
define
a
a
constructor
constructor
that
that
has
has
the
the
payload
payload
property.
property
In
in
this
this
example,
example
it's
it's
a
a
type
type
string,
string
but
but
it
it
could
could
be
be
any
any
type
type
of
of
JavaScript
javascript
object
object
you
you
wanna
wanna
send
send
here.
here
The
the
rest
rest
of
of
our
our
action
action
classes
classes
are
are
exactly
exactly
the
the
same,
same
but
but
they
they
have
have
no
no
data
data
payload
payload
so
so
we
we
don't
don't
need
need
to
to
add
add
that
that
constructor.
constructor
As
as
a
a
final
final
step,
step
we
we
will
will
export
export
all
all
these
these
actions
actions
as
as
a
a
single
single
type
type
so
so
they
they
can
can
easily
easily
be
be
added
added
for
for
strong
strong
typing
typing
in
in
other
other
files.
files
Now
now
let's
let's
build
build
a
a
new
new
post
post
reducer
reducer
to
to
handle
handle
this
this
more
more
complex
complex
data.
data
We
we
can
can
define
define
the
the
action
action
type
type
to
to
correspond
correspond
to
to
the
the
post
post
actions
actions
that
that
we
we
just
just
defined.
defined
Then
then
we
we
can
can
set
set
some
some
default
default
values
values
for
for
the
the
post
post
so
so
it
it
doesn't
doesn't
appear
appear
blank
blank
when
when
we
we
first
first
navigate
navigate
to
to
it.
it
As
as
I
i
mentioned
mentioned
previously,
previously
each
each
state
state
object
object
is
is
immutable
immutable
so
so
we
we
can't
can't
just
just
edit
edit
properties
properties
on
on
the
the
object
object
itself.
itself
An
an
efficient
efficient
way
way
to
to
create
create
new
new
objects
objects
is
is
to
to
use
use
object
object
dot
dot
assign
assign
and
and
pass
pass
it
it
first
first
an
an
empty
empty
object
object
and
and
then
then
the
the
state
state
and
and
any
any
new
new
data.
data
Object
object
assign
assign
will
will
build
build
a
a
new
new
object
object
from
from
left
left
to
to
right,
right
so
so
any
any
data
data
farther
farther
to
to
the
the
right
right
will
will
override
override
the
the
data
data
on
on
the
the
left.
left
Now
now
let's
let's
put
put
this
this
helper
helper
to
to
use
use
in
in
the
the
reducer
reducer
function.
function
Just
just
like
like
before,
before
we
we
pass
pass
the
the
reducer
reducer
function
function
the
the
state
state
as
as
well
well
as
as
an
an
action,
action
which
which
will
will
be
be
combined
combined
to
to
create
create
a
a
brand
brand
new
new
state
state
for
for
the
the
app.
app
Then
then
we
we
create
create
a
a
switch
switch
statement
statement
with
with
the
the
action
action
type.
type
And
and
if
if
you
you
remember,
remember
our
our
edit
edit
text
text
action
action
and
and
has
has
a
a
data
data
payload,
payload
so
so
we
we
can
can
pass
pass
that
that
to
to
the
the
new
new
state
state
helper
helper
that
that
we
we
just
just
defined.
defined
And
and
that
that
will
will
override
override
the
the
text
text
property
property
on
on
the
the
current
current
state.
state
For
for
the
the
upload
upload
and
and
download
download
actions,
actions
we
we
don't
don't
have
have
a
a
data
data
payload,
payload
but
but
we
we
can
can
still
still
increment
increment
them
them
just
just
by
by
a
a
single
single
number.
number
So
so
we
we
take
take
the
the
value
value
of
of
the
the
current
current
state
state
and
and
then
then
we
we
increment
increment
it
it
by
by
1.
1
And
and
our
our
final
final
action
action
will
will
reset
reset
the
the
post
post
to
to
its
its
default
default
values.
values
In
in
that
that
case
case
we
we
can
can
just
just
return
return
the
the
default
default
state
state
object
object
we
we
defined
defined
above.
above
Now
now
let's
let's
refactor
refactor
our
our
app
app
component.
component
We're
we're
going
going
to
to
import
import
ngrxstore
ngrxstore
as
as
well
well
as
as
our
our
post
post
actions
actions
and
and
our
our
post
post
model.
model
Then
then
we
we
can
can
tell
tell
our
our
AppState
appstate
interface
interface
to
to
adhere
adhere
to
to
the
the
post
post
model.
model
From
from
there,
there
we
we
set
set
an
an
observable
observable
for
for
the
the
post
post
itself
itself
and
and
also
also
a
a
variable
variable
for
for
text
text
which
which
just
just
represents
represents
the
the
text
text
in
in
the
the
form
form
in
in
the
the
HTML.
html
And
and
then
then
when
when
we
we
inject
inject
the
the
store,
store
we
we
give
give
it
it
the
the
app
app
state
state
type.
type
To
to
get
get
the
the
post
post
as
as
an
an
observable,
observable
we
we
just
just
call
call
store
store
dot
dot
select
select
post.
post
When
when
we
we
dispatch
dispatch
an
an
action,
action
now
now
we
we
can
can
instantiate
instantiate
a
a
new
new
instance
instance
of
of
class
class
rather
rather
than
than
just
just
passing
passing
a
a
plain
plain
JavaScript
javascript
object.
object
For
for
the
the
edit
edit
text
text
action,
action
we
we
pass
pass
the
the
data
data
payload
payload
which
which
is
is
the
the
text
text
in
in
the
the
form
form
in
in
the
the
HTML.
html
And
and
then
then
we
we
can
can
create
create
additional
additional
event
event
handlers
handlers
for
for
all
all
of
of
our
our
other
other
actions
actions
as
as
well.
well
Then
then
we
we
can
can
bind
bind
these
these
to
to
various
various
events
events
in
in
the
the
HTML
html
itself.
itself
First,
first
we
we
will
will
subscribe
subscribe
to
to
the
the
post
post
observable
observable
and
and
set
set
a
a
template
template
variable
variable
as
as
the
the
letter
letter
p.
p
And
and
we
we
can
can
just
just
call
call
p
p
dot
dot
text
text
for
for
the
the
title
title
and
and
then
then
p.
p
Likes
likes
to
to
represent
represent
the
the
votes.
votes
We
we
can
can
set
set
up
up
buttons
buttons
to
to
upvote
upvote
and
and
downvote
downvote
which
which
will
will
just
just
increment
increment
the
the
likes
likes
property
property
And
and
then
then
we'll
we'll
use
use
NG
ng
model
model
to
to
get
get
text
text
from
from
the
the
form
form
input
input
that
that
we
we
can
can
use
use
to
to
edit
edit
the
the
title.
title
That
that
form
form
text
text
is
is
the
the
actual
actual
data
data
payload
payload
that
that
goes
goes
to
to
the
the
reducer
reducer
function.
function
Going
going
back
back
to
to
the
the
app,
app
we
we
can
can
see
see
clicking
clicking
the
the
upvote
upvote
and
and
downvote
downvote
buttons
buttons
will
will
increment
increment
the
the
data
data
store,
store
and
and
it's
it's
instantly
instantly
represented
represented
in
in
the
the
UI.
ui
Currently,
currently
we're
we're
just
just
console
console
logging
logging
the
the
app
app
state
state
in
in
the
the
browser,
browser
but
but
there's
there's
actually
actually
a
a
much
much
better
better
way
way
to
to
do
do
this
this
for
for
debugging.
debugging
There's
there's
a
a
Chrome
chrome
plugin
plugin
called
called
Redux
redux
DevTools
devtools
which
which
is
is
compatible
compatible
with
with
NGRX.
ngrx
You
you
enable
enable
it
it
by
by
first
first
installing
installing
the
the
NPM
npm
package
package
and
and
then
then
installing
installing
the
the
Chrome
chrome
plugin
plugin
from
from
the
the
Chrome
chrome
store.
store
Then
then
you
you
can
can
import
import
it
it
in
in
the
the
app
app
module
module
and
and
add
add
it
it
to
to
the
the
import
import
section,
section
as
as
well
well
as
as
an
an
option
option
for
for
the
the
number
number
of
of
state
state
trees
trees
to
to
save
save
at
at
any
any
given
given
time.
time
It
it
gives
gives
you
you
a
a
time
time
lapse
lapse
history
history
of
of
how
how
your
your
data
data
changes
changes
throughout
throughout
the
the
application.
application
This
this
is
is
incredibly
incredibly
useful
useful
for
for
debugging
debugging
and
and
is
is
probably
probably
the
the
most
most
important
important
feature
feature
of
of
Redux
redux
in
in
general.
general
That's
that's
it
it
for
for
NGRX
ngrx
store
store
basics.
basics
In
in
the
the
next
next
video,
video
we're
we're
going
going
to
to
cover
cover
NGRX
ngrx
effects
effects
to
to
handle
handle
real
real
time
time
data
data
from
from
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
involved
involved
with
with
this
this
project,
project
consider
consider
joining
joining
our
our
Slack
slack
team
team
or
or
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss the concept of Redux and its use in React apps, including its use with automation and the creation of new post objects and post reducers. They also discuss how to export actions and create new objects in Redux, including a post reducer and helper functions. The speakers recommend a YouTube video on redirection for further knowledge and suggest reaching out to the NGRX team for further resources.
Angular ngrx Redux Quick Start Tutorial
Redux is a design pattern that keeps all application data in a single JavaScript object. This gives you a predictable global data state at any given point in time. This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library. In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX. Let's start by looking at the high level principles of Redux. So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data. In Redux, the only way to change the state is by dispatching an action. Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object. It's important to note that the state is immutable, meaning it can't be changed directly. It has to be copied over to a whole brand new state. The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux. Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less. In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application. This means that all of our components and services will be sharing the same data at any given point in time. Now let's start building a brand new ngrx app. 1st, run ng new and then npm install ngrx/store. I'm going to start with the most simple example possible where our entire application state is represented by a single string. Then we'll create 2 different actions to translate the string into Spanish in French. First, let's go into the app module and import ngrx. I'm also importing a reducer function, which we'll create in the next step. Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer. Now let's go ahead and build this reducer function. We import the action interface from ngrx, then we export a function that takes a state and an action as arguments. The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make. We can handle this logic with a switch statement that takes the action type as the argument. Then we set up different cases for different actions, which are all caps by convention. And then since our application state is just a string, we can just return a brand new string. We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript. With that done, let's go to the App component and import the ngrx store as well as an RxJS observable. The NGRX store works just like an Angular service. We can inject it into our components to share a single source of data. When using store, you need an interface that will define your app state. So here we just have a message that's a string, so a simple interface there. Then when we add the store to the constructor, we pass that app state interface to it. Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe. So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data. To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform. Form. Now we can go into the app component HTML, and we can unwrap the observable using the async pipe. Then we can take our dispatch functions and bind them to the click event on a couple buttons. Then inside the app, we can see that we get an initial state of hello, world. And when we click Spanish or French, it translates the message to the new state. So that's a bare minimum example of NGRX. Now let's build something a little more complex. The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state. Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata. Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data. Then create a new file called post actions dotts. This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface. But first, we'll export constants that represent each action in all caps by convention. So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above. To send data with this action, we need to define a constructor that has the payload property. In this example, it's a type string, but it could be any type of JavaScript object you wanna send here. The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor. As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files. Now let's build a new post reducer to handle this more complex data. We can define the action type to correspond to the post actions that we just defined. Then we can set some default values for the post so it doesn't appear blank when we first navigate to it. As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself. An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data. Object assign will build a new object from left to right, so any data farther to the right will override the data on the left. Now let's put this helper to use in the reducer function. Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app. Then we create a switch statement with the action type. And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined. And that will override the text property on the current state. For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number. So we take the value of the current state and then we increment it by 1. And our final action will reset the post to its default values. In that case we can just return the default state object we defined above. Now let's refactor our app component. We're going to import ngrxstore as well as our post actions and our post model. Then we can tell our AppState interface to adhere to the post model. From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML. And then when we inject the store, we give it the app state type. To get the post as an observable, we just call store dot select post. When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object. For the edit text action, we pass the data payload which is the text in the form in the HTML. And then we can create additional event handlers for all of our other actions as well. Then we can bind these to various events in the HTML itself. First, we will subscribe to the post observable and set a template variable as the letter p. And we can just call p dot text for the title and then p. Likes to represent the votes. We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title. That form text is the actual data payload that goes to the reducer function. Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI. Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging. There's a Chrome plugin called Redux DevTools which is compatible with NGRX. You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store. Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time. It gives you a time lapse history of how your data changes throughout the application. This is incredibly useful for debugging and is probably the most important feature of Redux in general. That's it for NGRX store basics. In the next video, we're going to cover NGRX effects to handle real time data from Firebase. If this video helped you, please like and subscribe. And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
The speakers discuss the concept of Redux and its use in React apps, including its use with automation and the creation of new post objects and post reducers. They also discuss how to export actions and create new objects in Redux, including a post reducer and helper functions. The speakers recommend a YouTube video on redirection for further knowledge and suggest reaching out to the NGRX team for further resources.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular ngrx Redux Quick Start Tutorial 
        and a small summary : The speakers discuss the concept of Redux and its use in React apps, including its use with automation and the creation of new post objects and post reducers. They also discuss how to export actions and create new objects in Redux, including a post reducer and helper functions. The speakers recommend a YouTube video on redirection for further knowledge and suggest reaching out to the NGRX team for further resources.
        [/INST]
        
        Generate the video : Redux is a design pattern that keeps all application data in a single JavaScript object. This gives you a predictable global data state at any given point in time. This technique is most popular in React apps, but it can also be applied to Angular apps with a library called NGRX, which uses Redux principles with RxJS as the underlying library. In this episode I'm gonna cover the basics of Redux and then we'll build an Angular app from scratch using NGRX. Let's start by looking at the high level principles of Redux. So we have a user interface that is displaying some data, then the user performs an action that will change the state of the data. In Redux, the only way to change the state is by dispatching an action. Once an action has been dispatched, it will go to a reducer function, which will copy the current state of the application along with any data changes to a new JavaScript object. It's important to note that the state is immutable, meaning it can't be changed directly. It has to be copied over to a whole brand new state. The reason for this is it gives us a predictable tree of state changes that we can use to debug an application, and that's really the main benefit of Redux. Once the reducer has created the new state, it gets saved in a data store, which can be thought of as a client side database more or less. In n g r x, we treat this data store as an observable so we can subscribe to it from anywhere in the application. This means that all of our components and services will be sharing the same data at any given point in time. Now let's start building a brand new ngrx app. 1st, run ng new and then npm install ngrx/store. I'm going to start with the most simple example possible where our entire application state is represented by a single string. Then we'll create 2 different actions to translate the string into Spanish in French. First, let's go into the app module and import ngrx. I'm also importing a reducer function, which we'll create in the next step. Then in the imports metadata, add store module for root, and then we'll add a key message with the simple reducer. Now let's go ahead and build this reducer function. We import the action interface from ngrx, then we export a function that takes a state and an action as arguments. The purpose of this function is to take the current state and copy it over to the new state based on whatever changes the action is trying to make. We can handle this logic with a switch statement that takes the action type as the argument. Then we set up different cases for different actions, which are all caps by convention. And then since our application state is just a string, we can just return a brand new string. We're going to refactor this later in the video to use a strong typed JavaScript object with TypeScript. With that done, let's go to the App component and import the ngrx store as well as an RxJS observable. The NGRX store works just like an Angular service. We can inject it into our components to share a single source of data. When using store, you need an interface that will define your app state. So here we just have a message that's a string, so a simple interface there. Then when we add the store to the constructor, we pass that app state interface to it. Then we can retrieve data from the store by calling store dot select and the object or in this case, the string that we wanna observe. So now that we're observing our app state, we just need a couple functions to send actions to the reducer function to change this data. To handle that, we call store dot dispatch and pass it an object with a type that represents the action we're trying to perform. Form. Now we can go into the app component HTML, and we can unwrap the observable using the async pipe. Then we can take our dispatch functions and bind them to the click event on a couple buttons. Then inside the app, we can see that we get an initial state of hello, world. And when we click Spanish or French, it translates the message to the new state. So that's a bare minimum example of NGRX. Now let's build something a little more complex. The updated app is going to use a post object that can be upvoted or downvoted, and we can also change the title and reset it to the default state. Then let's go back to the app module and we'll import a new post reducer and then we'll add that to the store module metadata. Then we'll create a dedicated model for our post which is nothing more than an interface with the properties on our data. Then create a new file called post actions dotts. This time we wanna send data along with our actions, so we'll define each one as its own class that implements the action interface. But first, we'll export constants that represent each action in all caps by convention. So for the edit text class, we will implement the action interface, and then we'll create a read only type that corresponds to the action constant that we defined above. To send data with this action, we need to define a constructor that has the payload property. In this example, it's a type string, but it could be any type of JavaScript object you wanna send here. The rest of our action classes are exactly the same, but they have no data payload so we don't need to add that constructor. As a final step, we will export all these actions as a single type so they can easily be added for strong typing in other files. Now let's build a new post reducer to handle this more complex data. We can define the action type to correspond to the post actions that we just defined. Then we can set some default values for the post so it doesn't appear blank when we first navigate to it. As I mentioned previously, each state object is immutable so we can't just edit properties on the object itself. An efficient way to create new objects is to use object dot assign and pass it first an empty object and then the state and any new data. Object assign will build a new object from left to right, so any data farther to the right will override the data on the left. Now let's put this helper to use in the reducer function. Just like before, we pass the reducer function the state as well as an action, which will be combined to create a brand new state for the app. Then we create a switch statement with the action type. And if you remember, our edit text action and has a data payload, so we can pass that to the new state helper that we just defined. And that will override the text property on the current state. For the upload and download actions, we don't have a data payload, but we can still increment them just by a single number. So we take the value of the current state and then we increment it by 1. And our final action will reset the post to its default values. In that case we can just return the default state object we defined above. Now let's refactor our app component. We're going to import ngrxstore as well as our post actions and our post model. Then we can tell our AppState interface to adhere to the post model. From there, we set an observable for the post itself and also a variable for text which just represents the text in the form in the HTML. And then when we inject the store, we give it the app state type. To get the post as an observable, we just call store dot select post. When we dispatch an action, now we can instantiate a new instance of class rather than just passing a plain JavaScript object. For the edit text action, we pass the data payload which is the text in the form in the HTML. And then we can create additional event handlers for all of our other actions as well. Then we can bind these to various events in the HTML itself. First, we will subscribe to the post observable and set a template variable as the letter p. And we can just call p dot text for the title and then p. Likes to represent the votes. We can set up buttons to upvote and downvote which will just increment the likes property And then we'll use NG model to get text from the form input that we can use to edit the title. That form text is the actual data payload that goes to the reducer function. Going back to the app, we can see clicking the upvote and downvote buttons will increment the data store, and it's instantly represented in the UI. Currently, we're just console logging the app state in the browser, but there's actually a much better way to do this for debugging. There's a Chrome plugin called Redux DevTools which is compatible with NGRX. You enable it by first installing the NPM package and then installing the Chrome plugin from the Chrome store. Then you can import it in the app module and add it to the import section, as well as an option for the number of state trees to save at any given time. It gives you a time lapse history of how your data changes throughout the application. This is incredibly useful for debugging and is probably the most important feature of Redux in general. That's it for NGRX store basics. In the next video, we're going to cover NGRX effects to handle real time data from Firebase. If this video helped you, please like and subscribe. And if you wanna get involved with this project, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you soon.
        