title
Ngrx Store Tutorial for Angular - Learn State Management for Angular

description
SUBSCRIBE and leave a comment for christ's sake! ;) Written version: https://goo.gl/6s3LYN In this tutorial, we're going to learn all about Ngrx Store for Angular 2, 4, 5+. Ngrx Store is a state management solution for Angular apps that will make your life much easier when dealing with data on medium to large size Angular applications. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Ngrx Store Tutorial for Angular - Learn State Management for Angular', 'heatmap': [{'end': 1020.662, 'start': 976.953, 'weight': 0.883}, {'end': 1167.7, 'start': 1094.605, 'weight': 0.817}], 'summary': 'This tutorial introduces ngrx store for angular state management, offering a 59-minute crash course on its observable aspect, setting up ng-rx, creating store model and actions, creating redux actions, ngrx reducers, store configuration, and component generation for reading and writing to the store, providing insights into reducer behavior.', 'chapters': [{'end': 84.838, 'segs': [{'end': 46.641, 'src': 'embed', 'start': 2.671, 'weight': 0, 'content': [{'end': 5.434, 'text': 'Hey everyone, Gary Simon of Corsetro.', 'start': 2.671, 'duration': 2.763}, {'end': 10.778, 'text': "Today we're going to take a look at NGRX Store, which is a state management solution for Angular.", 'start': 5.454, 'duration': 5.324}, {'end': 18.665, 'text': "So if you're dealing with data that's in a medium to large size Angular application and you're passing it around to different components,", 'start': 11.219, 'duration': 7.446}, {'end': 23.57, 'text': "it makes sense to use something like NGRX, because it's going to make your life a lot easier,", 'start': 18.665, 'duration': 4.905}, {'end': 25.932, 'text': 'especially when debugging and trying to test your application.', 'start': 23.57, 'duration': 2.362}, {'end': 30.834, 'text': "So it's built on top of RxJS, which is reactive X for JavaScript.", 'start': 26.552, 'duration': 4.282}, {'end': 32.615, 'text': 'And I just did a free course on that.', 'start': 30.874, 'duration': 1.741}, {'end': 33.836, 'text': "It's about 59 minutes.", 'start': 32.674, 'duration': 1.162}, {'end': 34.696, 'text': "It's a crash course.", 'start': 33.916, 'duration': 0.78}, {'end': 41.259, 'text': "It'll help you understand the observable aspect of NGRX because it's built on top of RxJS.", 'start': 34.796, 'duration': 6.463}, {'end': 41.939, 'text': 'All right.', 'start': 41.699, 'duration': 0.24}, {'end': 46.641, 'text': 'So as always, make sure you subscribe here and also leave a comment.', 'start': 41.979, 'duration': 4.662}], 'summary': 'Ngrx store is a state management solution for large angular apps, with a crash course of about 59 minutes on rxjs.', 'duration': 43.97, 'max_score': 2.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc2671.jpg'}, {'end': 92.744, 'src': 'embed', 'start': 66.69, 'weight': 2, 'content': [{'end': 70.651, 'text': "where you're going to find a bunch of courses on modern design and development.", 'start': 66.69, 'duration': 3.961}, {'end': 76.332, 'text': 'A lot are free and the others you can access for the cost of buying me like a six pack each month.', 'start': 71.111, 'duration': 5.221}, {'end': 76.832, 'text': "That's it.", 'start': 76.492, 'duration': 0.34}, {'end': 83.457, 'text': "Now also, it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on.", 'start': 77.412, 'duration': 6.045}, {'end': 84.838, 'text': "All right, let's get back to it.", 'start': 83.757, 'duration': 1.081}, {'end': 92.744, 'text': 'Make sure you have that installed and if you wanna check it, ng-v, that will give you the version.', 'start': 85.178, 'duration': 7.566}], 'summary': 'Access free modern design and development courses, pay for some, subscribe for updates.', 'duration': 26.054, 'max_score': 66.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc66690.jpg'}], 'start': 2.671, 'title': 'Ngrx store for angular state management', 'summary': 'Introduces ngrx store, a state management solution for medium to large size angular applications, built on top of rxjs, offering a crash course of about 59 minutes to understand its observable aspect.', 'chapters': [{'end': 84.838, 'start': 2.671, 'title': 'Ngrx store for angular state management', 'summary': 'Introduces ngrx store, a state management solution for medium to large size angular applications, built on top of rxjs, offering a crash course of about 59 minutes to understand its observable aspect.', 'duration': 82.167, 'highlights': ['NGRX Store is a state management solution for medium to large size Angular applications, making data handling and debugging easier. NGRX Store simplifies data management in medium to large size Angular applications, improving debugging and testing processes.', 'NGRX Store is built on top of RxJS, providing a crash course of about 59 minutes to understand its observable aspect. NGRX Store is built on top of RxJS, offering a crash course of about 59 minutes to understand its observable aspect, which aids in better comprehension and utilization of the tool.', 'The speaker encourages engagement, requesting subscriptions, comments, and site visits. The speaker encourages engagement, requesting subscriptions, comments, and site visits to course setro.com for accessing free courses on modern design and development.']}], 'duration': 82.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc2671.jpg', 'highlights': ['NGRX Store simplifies data management in medium to large size Angular applications, improving debugging and testing processes.', 'NGRX Store is built on top of RxJS, offering a crash course of about 59 minutes to understand its observable aspect, aiding in better comprehension and utilization of the tool.', 'The speaker encourages engagement, requesting subscriptions, comments, and site visits to course setro.com for accessing free courses on modern design and development.']}, {'end': 341.291, 'segs': [{'end': 166.055, 'src': 'embed', 'start': 85.178, 'weight': 0, 'content': [{'end': 92.744, 'text': 'Make sure you have that installed and if you wanna check it, ng-v, that will give you the version.', 'start': 85.178, 'duration': 7.566}, {'end': 95.506, 'text': "Go ahead and install it if you don't have that.", 'start': 93.824, 'duration': 1.682}, {'end': 96.807, 'text': "I'm not going to cover that part yet.", 'start': 95.546, 'duration': 1.261}, {'end': 108.072, 'text': "So what we're going to do is once you have it, ng new, and then I'm just going to call this ng-rx-toot for tutorial and let this install.", 'start': 97.607, 'duration': 10.465}, {'end': 111.493, 'text': "All right, it's finished now.", 'start': 110.233, 'duration': 1.26}, {'end': 112.794, 'text': "So let's cd into that.", 'start': 111.533, 'duration': 1.261}, {'end': 119.276, 'text': "All right, and now we're going to use a package manager.", 'start': 115.755, 'duration': 3.521}, {'end': 120.877, 'text': 'You could use npm if you want.', 'start': 119.316, 'duration': 1.561}, {'end': 122.178, 'text': "I'm going to use yarn.", 'start': 120.977, 'duration': 1.201}, {'end': 125.099, 'text': 'So in the case of yarn, it would be yarn add.', 'start': 122.578, 'duration': 2.521}, {'end': 132.687, 'text': "ng-rx forward slash store and I'm going to hit enter also at this point.", 'start': 126.042, 'duration': 6.645}, {'end': 140.032, 'text': "if you were having, if you're going to be working with api's and such, you would also want to include ng-rx effects as well.", 'start': 132.687, 'duration': 7.345}, {'end': 148.838, 'text': "but we're going to keep everything really simple for this tutorial and then I will release future tutorials where we cover more intermediate topics.", 'start': 140.032, 'duration': 8.806}, {'end': 154.302, 'text': 'but this is just bare bones just to help us get our feet wet and understand everything at a really basic level.', 'start': 148.838, 'duration': 5.464}, {'end': 156.651, 'text': 'All right.', 'start': 155.711, 'duration': 0.94}, {'end': 166.055, 'text': "so now, once that's done, I'm just going to run ng serve and then hyphen o to open up the browser for us at localhost.", 'start': 156.651, 'duration': 9.404}], 'summary': 'Installation and setup of ng-rx for tutorial, using ng new and package manager, yarn, and running ng serve.', 'duration': 80.877, 'max_score': 85.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc85178.jpg'}, {'end': 250.526, 'src': 'embed', 'start': 224.713, 'weight': 5, 'content': [{'end': 230.719, 'text': "Now we're not going to be persisting this data in a database or anything because that would really extend the scope of this tutorial way too much.", 'start': 224.713, 'duration': 6.006}, {'end': 234.242, 'text': 'So we only want to focus on ngRxStore and learning how to use it.', 'start': 231.199, 'duration': 3.043}, {'end': 240.483, 'text': 'So being that we want to store two pieces of data in the flavor of an array of objects, we will first define this model.', 'start': 234.742, 'duration': 5.741}, {'end': 248.486, 'text': "So we're going to head on over and inside of our source folder, we're going to create a new folder where we'll store the models.", 'start': 241.024, 'duration': 7.462}, {'end': 250.526, 'text': "In our case, we're just going to have one.", 'start': 249.126, 'duration': 1.4}], 'summary': 'Tutorial focuses on using ngrxstore to store two pieces of data in an array of objects, without persisting in a database.', 'duration': 25.813, 'max_score': 224.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc224713.jpg'}, {'end': 295.23, 'src': 'embed', 'start': 263.847, 'weight': 3, 'content': [{'end': 267.75, 'text': "So a model, of course, this isn't something that's specific to NGRX or anything.", 'start': 263.847, 'duration': 3.903}, {'end': 271.373, 'text': "So we're just going to export interface.", 'start': 267.77, 'duration': 3.603}, {'end': 273.134, 'text': "We'll call it tutorial.", 'start': 271.913, 'duration': 1.221}, {'end': 282.843, 'text': 'And what is a tutorial going to consist of? Well, a name of string and also a URL of string as well.', 'start': 274.075, 'duration': 8.768}, {'end': 286.719, 'text': 'So go ahead and save that.', 'start': 285.578, 'duration': 1.141}, {'end': 288.902, 'text': "And now let's talk about actions.", 'start': 287.14, 'duration': 1.762}, {'end': 295.23, 'text': 'So this is specific to NGRX and an action in NGRX store is two things.', 'start': 289.062, 'duration': 6.168}], 'summary': "Exported interface 'tutorial' consists of a name and url as string. ngrx action in store entails two things.", 'duration': 31.383, 'max_score': 263.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc263847.jpg'}], 'start': 85.178, 'title': 'Setting up ng-rx and creating store model and actions', 'summary': 'Covers setting up ng-rx for a basic tutorial, including installing necessary packages and running ng serve. it also discusses creating a model for storing tutorial data and defining actions for ngrx store without persisting the data in a database.', 'chapters': [{'end': 194.515, 'start': 85.178, 'title': 'Setting up ng-rx for a basic tutorial', 'summary': 'Covers the process of setting up ng-rx for a basic tutorial, including installing necessary packages, using a package manager, and running the ng serve command to open the browser at localhost 4200.', 'duration': 109.337, 'highlights': ["Installing ng-rx store and ng-rx effects using yarn or npm The tutorial emphasizes the installation of ng-rx store and ng-rx effects using yarn or npm, with the specific command 'yarn add ng-rx/store' being used.", "Running the ng serve command to open the browser at localhost The tutorial highlights the process of running the 'ng serve' command to open the browser at localhost 4200 for the ng-rx tutorial.", "Checking ng version using 'ng v' command The tutorial mentions the use of the 'ng v' command to check the ng version, providing a quick way to verify installation."]}, {'end': 341.291, 'start': 195.355, 'title': 'Creating ngrx store model and actions', 'summary': 'Discusses creating a model for storing tutorial data and defining actions for ngrx store, focusing on adding a tutorial with a name and url, without persisting the data in a database.', 'duration': 145.936, 'highlights': ['We create a model for tutorials with a name and URL, without persisting data in a database.', 'Actions in NGRX store are defined as types in the form of strings, describing the action like add tutorial, remove tutorial, or update tutorial, and may contain an optional payload of data.', 'The focus is on using NGRX Store to store two pieces of data in the form of an array of objects and learning how to use it.']}], 'duration': 256.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc85178.jpg', 'highlights': ['Installing ng-rx store and ng-rx effects using yarn or npm', 'Running the ng serve command to open the browser at localhost', "Checking ng version using 'ng v' command", 'Actions in NGRX store are defined as types in the form of strings', 'We create a model for tutorials with a name and URL, without persisting data in a database', 'The focus is on using NGRX Store to store two pieces of data in the form of an array of objects and learning how to use it']}, {'end': 574.321, 'segs': [{'end': 541.108, 'src': 'embed', 'start': 342.031, 'weight': 0, 'content': [{'end': 345.173, 'text': "We'll create a folder called Actions.", 'start': 342.031, 'duration': 3.142}, {'end': 352.978, 'text': "Alright, and inside of here we'll create a file and we'll name this tutorial.actions.ts.", 'start': 346.554, 'duration': 6.424}, {'end': 365.149, 'text': "Alright, so at this point I should note that This entire tutorial that you're listening to, you're watching, is also written.", 'start': 354.479, 'duration': 10.67}, {'end': 368.271, 'text': 'And so the written version is linked in the YouTube description.', 'start': 365.589, 'duration': 2.682}, {'end': 371.293, 'text': "And it has all the code that we're going to be dealing with.", 'start': 368.872, 'duration': 2.421}, {'end': 377.958, 'text': "And I'm basically following this written tutorial as I record this recorded version.", 'start': 371.453, 'duration': 6.505}, {'end': 384.522, 'text': "And so I'm going to be just copying and pasting and then describing bits and pieces of the code.", 'start': 378.358, 'duration': 6.164}, {'end': 386.603, 'text': 'So if you want to do the same, you can.', 'start': 384.702, 'duration': 1.901}, {'end': 389.946, 'text': "You don't have to sit here typing everything out character for character.", 'start': 386.663, 'duration': 3.283}, {'end': 390.846, 'text': 'All right.', 'start': 390.606, 'duration': 0.24}, {'end': 396.207, 'text': "So the very first thing for our actions file is we're going to import.", 'start': 391.206, 'duration': 5.001}, {'end': 398.708, 'text': "I'm going to control B to get rid of that sidebar.", 'start': 396.227, 'duration': 2.481}, {'end': 402.749, 'text': "Yeah, we're just going to import these three lines right here.", 'start': 399.488, 'duration': 3.261}, {'end': 411.751, 'text': "And the two relevant bits here would just be the fact that we're importing action from ngStore, being that this is an actions file.", 'start': 403.929, 'duration': 7.822}, {'end': 413.031, 'text': "We're defining actions.", 'start': 411.991, 'duration': 1.04}, {'end': 416.752, 'text': 'And then also our tutorial model that we just created.', 'start': 413.471, 'duration': 3.281}, {'end': 418.533, 'text': 'Very simple stuff.', 'start': 417.432, 'duration': 1.101}, {'end': 423.238, 'text': "So for the next section, we're defining two constants.", 'start': 419.194, 'duration': 4.044}, {'end': 425.32, 'text': 'And the first is add tutorial.', 'start': 423.858, 'duration': 1.462}, {'end': 428.963, 'text': "And we're just naming it tutorial in add.", 'start': 426.1, 'duration': 2.863}, {'end': 430.545, 'text': 'And this is the type.', 'start': 429.203, 'duration': 1.342}, {'end': 432.887, 'text': 'Remember I mentioned that actions are two things.', 'start': 430.865, 'duration': 2.022}, {'end': 435.129, 'text': "They're types in the form of a string.", 'start': 432.987, 'duration': 2.142}, {'end': 437.231, 'text': 'So this is that section.', 'start': 436.13, 'duration': 1.101}, {'end': 443.672, 'text': "And so right now I'm just creating two for adding and removing, and that should give us, you know,", 'start': 438.345, 'duration': 5.327}, {'end': 447.576, 'text': 'enough muscle memory to work with this and you can go on your own to do other types as you wish.', 'start': 443.672, 'duration': 3.904}, {'end': 457.869, 'text': "And then for our third section, I will type this out and we're going to export a class called add tutorial and it will implement.", 'start': 448.517, 'duration': 9.352}, {'end': 476.04, 'text': "action and we're going to define a variable read only, and the name will be type and equals our constant, our first constant of add tutorial,", 'start': 460.288, 'duration': 15.752}, {'end': 484.547, 'text': "and then also we'll have a constructor repass in public payload of type tutorial.", 'start': 476.04, 'duration': 8.507}, {'end': 488.91, 'text': "And if this is confusing to you, don't worry.", 'start': 486.347, 'duration': 2.563}, {'end': 495.619, 'text': "Basically, at this point, we're creating a class for each of our actions with this constructor right here.", 'start': 489.471, 'duration': 6.148}, {'end': 498.522, 'text': 'And this allows us to pass in the payload of data.', 'start': 495.639, 'duration': 2.883}, {'end': 509.653, 'text': "and this whole setup right here isn't necessarily required.", 'start': 504.549, 'duration': 5.104}, {'end': 513.535, 'text': "you can create a more simple version where you don't even create an actions file.", 'start': 509.653, 'duration': 3.882}, {'end': 520.461, 'text': "and i'll mention that when we get to the reducer section, all right, we're going to do the same thing for remove tutorial.", 'start': 513.535, 'duration': 6.926}, {'end': 534.36, 'text': "so remove tutorial Alright, and in this time we don't need a tutorial to pass in.", 'start': 520.461, 'duration': 13.899}, {'end': 541.108, 'text': 'All we need is the index of the tutorial that we want to remove.', 'start': 534.801, 'duration': 6.307}], 'summary': 'Creating an actions file with import, constants, and class for add and remove tutorial.', 'duration': 199.077, 'max_score': 342.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc342031.jpg'}], 'start': 342.031, 'title': 'Creating redux actions', 'summary': 'Covers creating a folder and file for actions, importing actions and models, defining constants, exporting a class, and creating action types and payloads for redux. it emphasizes muscle memory and flexibility, with a simpler version and process for removing a tutorial by index.', 'chapters': [{'end': 418.533, 'start': 342.031, 'title': 'Creating actions in tutorial', 'summary': 'Covers the creation of a folder called actions and a file named tutorial.actions.ts, with the tutorial also available in a written version linked in the youtube description, containing all the code. it includes importing actions and the tutorial model from ngstore for defining actions.', 'duration': 76.502, 'highlights': ['The tutorial is available in a written version linked in the YouTube description, containing all the code, providing an alternative for the audience to follow along without typing everything out character for character.', 'The chapter covers the creation of a folder called Actions and a file named tutorial.actions.ts, indicating the initial steps in setting up the project.', 'Importing actions and the tutorial model from ngStore for defining actions, a crucial step in the process of creating the actions file.']}, {'end': 476.04, 'start': 419.194, 'title': 'Defining constants and exporting class', 'summary': "Explains the process of defining constants 'add tutorial' and 'type' as well as exporting a class called 'add tutorial' while emphasizing the importance of muscle memory and the flexibility to create other types as needed.", 'duration': 56.846, 'highlights': ['The chapter emphasizes the importance of muscle memory and the flexibility to create other types as needed, providing a comprehensive understanding for future implementation.', "The process of defining constants 'add tutorial' and 'type' is explained, showcasing the foundational elements required for further development.", "Exporting a class called 'add tutorial' and the definition of a variable 'read only' are demonstrated, providing practical insights into the implementation process."]}, {'end': 574.321, 'start': 476.04, 'title': 'Redux actions and payload', 'summary': 'Discusses creating action types and payloads for redux, including the process of creating classes for each action, mentioning the possibility of a simpler version, and explaining the process for removing a tutorial by index.', 'duration': 98.281, 'highlights': ['Creating classes for each action with constructor to pass payload of data The chapter explains the process of creating a class for each action with a constructor to pass in the payload of data, providing a structured approach for handling actions.', "Possibility of creating a simpler version without an actions file It's mentioned that a simpler version can be created without an actions file, offering flexibility in implementing Redux actions based on project requirements.", 'Explanation of removing a tutorial by index The chapter outlines the process of removing a tutorial by specifying the index, providing insight into the practical implementation of removing specific data from the Redux state.']}], 'duration': 232.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc342031.jpg', 'highlights': ['The tutorial is available in a written version linked in the YouTube description, providing an alternative for the audience to follow along without typing everything out character for character.', 'The chapter covers the creation of a folder called Actions and a file named tutorial.actions.ts, indicating the initial steps in setting up the project.', 'Importing actions and the tutorial model from ngStore for defining actions, a crucial step in the process of creating the actions file.', 'The chapter emphasizes the importance of muscle memory and the flexibility to create other types as needed, providing a comprehensive understanding for future implementation.', "The process of defining constants 'add tutorial' and 'type' is explained, showcasing the foundational elements required for further development.", "Exporting a class called 'add tutorial' and the definition of a variable 'read only' are demonstrated, providing practical insights into the implementation process.", 'Creating classes for each action with constructor to pass payload of data, providing a structured approach for handling actions.', 'Possibility of creating a simpler version without an actions file, offering flexibility in implementing Redux actions based on project requirements.', 'Explanation of removing a tutorial by index, providing insight into the practical implementation of removing specific data from the Redux state.']}, {'end': 930.096, 'segs': [{'end': 705.749, 'src': 'embed', 'start': 575.081, 'weight': 0, 'content': [{'end': 580.323, 'text': 'And this will allow us to access those actions in the reducer that we created shortly.', 'start': 575.081, 'duration': 5.242}, {'end': 589.945, 'text': 'So, right here and again, when it comes to NGRX store, one of the areas people would probably be most confused about is this section,', 'start': 580.903, 'duration': 9.042}, {'end': 591.385, 'text': 'and also the reducer, coming up.', 'start': 589.945, 'duration': 1.44}, {'end': 594.986, 'text': "But this, you'll start to understand how this works more and more.", 'start': 591.405, 'duration': 3.581}, {'end': 603.649, 'text': "By the way, these don't necessarily even need a constructor, like I mentioned before, if you don't actually have to pass in any type of data.", 'start': 595.386, 'duration': 8.263}, {'end': 604.809, 'text': 'all right.', 'start': 603.649, 'duration': 1.16}, {'end': 611.374, 'text': "so let's go ahead and save this and we'll go hit control b here to get our sidebar.", 'start': 604.809, 'duration': 6.565}, {'end': 613.215, 'text': 'and now we need to create the reducer.', 'start': 611.374, 'duration': 1.841}, {'end': 618.158, 'text': 'so we have our model right here, we have our action and now we create the reducer.', 'start': 613.215, 'duration': 4.943}, {'end': 618.978, 'text': 'all right.', 'start': 618.158, 'duration': 0.82}, {'end': 623.782, 'text': 'so reducer is what takes the incoming action and decides what to do with it.', 'start': 618.978, 'duration': 4.804}, {'end': 631.928, 'text': "so It takes the previous state and returns a new state based on the given action and the payload or the data that's coming through.", 'start': 623.782, 'duration': 8.146}, {'end': 635.591, 'text': "So let's create a reducers folder in source.", 'start': 632.308, 'duration': 3.283}, {'end': 643.757, 'text': "And we're going to create our tutorial.reducer.ts.", 'start': 637.732, 'duration': 6.025}, {'end': 647.34, 'text': 'All right.', 'start': 646.38, 'duration': 0.96}, {'end': 658.526, 'text': "so first things first, we have three different imports and we're importing action from ngRxStore, our tutorial model, as well as all of our actions,", 'start': 647.34, 'duration': 11.186}, {'end': 661.207, 'text': 'and referring all of it as to tutorial actions.', 'start': 658.526, 'duration': 2.681}, {'end': 672.393, 'text': "All right, so for this next step, if you want to create an initial state with some sort of data, then we'll create it like this, a constant.", 'start': 662.708, 'duration': 9.685}, {'end': 674.954, 'text': 'We can call it default state or initial state, whatever you want.', 'start': 672.613, 'duration': 2.341}, {'end': 679.114, 'text': "And it'll be of a type tutorial.", 'start': 676.813, 'duration': 2.301}, {'end': 691.041, 'text': 'And then we can just define name, for instance, initial tutorial, and then a URL of google.com.', 'start': 680.495, 'duration': 10.546}, {'end': 693.639, 'text': 'All right.', 'start': 693.379, 'duration': 0.26}, {'end': 698.063, 'text': "So now let's create the actual reducer.", 'start': 694.06, 'duration': 4.003}, {'end': 705.249, 'text': 'So the way we do that is export function, and we could call this just reducer if we had one of them.', 'start': 698.403, 'duration': 6.846}, {'end': 705.749, 'text': 'and we do.', 'start': 705.249, 'duration': 0.5}], 'summary': 'Creating reducers in ngrx store to handle actions and state changes.', 'duration': 130.668, 'max_score': 575.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc575081.jpg'}], 'start': 575.081, 'title': 'Ngrx reducers and actions', 'summary': 'Covers creating ngrx reducer and actions, emphasizing understanding the working, defining initial state, creating the reducer function, using switch to determine action type, and creating an app state interface to bind the reducer to a tutorial array.', 'chapters': [{'end': 618.978, 'start': 575.081, 'title': 'Ngrx reducer and actions', 'summary': 'Introduces creating ngrx reducer and actions, emphasizing on understanding the working more as people could be confused about the section and the reducer, without necessarily requiring a constructor.', 'duration': 43.897, 'highlights': ['Creating NGRX reducer and actions is emphasized for better understanding, as people may be confused about the section and the reducer.', 'It is mentioned that constructors may not be necessary if no data needs to be passed in.']}, {'end': 930.096, 'start': 618.978, 'title': 'Creating reducers in ngrx', 'summary': 'Covers creating reducers in ngrx, including defining initial state, creating the actual reducer function, using switch to determine action type, and creating an app state interface to bind the reducer to a tutorial array.', 'duration': 311.118, 'highlights': ['The chapter covers creating reducers in NgRx, including defining initial state, creating the actual reducer function, using switch to determine action type, and creating an app state interface to bind the reducer to a tutorial array.', 'The reducer takes the previous state and returns a new state based on the given action and payload.', 'The initial state is defined as a constant of type tutorial with initial values for name and URL.', 'The reducer function uses a switch statement to determine the type of action being accessed.', 'An app state interface is created to bind the reducer to a tutorial array.']}], 'duration': 355.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc575081.jpg', 'highlights': ['Creating NGRX reducer and actions is emphasized for better understanding, as people may be confused about the section and the reducer.', 'The chapter covers creating reducers in NgRx, including defining initial state, creating the actual reducer function, using switch to determine action type, and creating an app state interface to bind the reducer to a tutorial array.', 'The reducer takes the previous state and returns a new state based on the given action and payload.', 'It is mentioned that constructors may not be necessary if no data needs to be passed in.', 'The initial state is defined as a constant of type tutorial with initial values for name and URL.', 'The reducer function uses a switch statement to determine the type of action being accessed.']}, {'end': 1167.7, 'segs': [{'end': 1020.662, 'src': 'heatmap', 'start': 953.761, 'weight': 0, 'content': [{'end': 958.025, 'text': "So what we're going to do now is create that or go to our app.module file.", 'start': 953.761, 'duration': 4.264}, {'end': 960.687, 'text': 'And now we just have to import a few things.', 'start': 958.705, 'duration': 1.982}, {'end': 975.613, 'text': "So we're going to import our store module from NGRX store, and then also the reducer that we created in tutorial reducer.", 'start': 962.168, 'duration': 13.445}, {'end': 976.833, 'text': 'All right.', 'start': 975.633, 'duration': 1.2}, {'end': 985.877, 'text': "And then in our imports after our browser module, we're going to put in our store module that we imported above for root.", 'start': 976.953, 'duration': 8.924}, {'end': 994.82, 'text': 'And then we pass in a property called tutorial, and then we name it reducer.', 'start': 987.357, 'duration': 7.463}, {'end': 999.381, 'text': 'All right, go ahead and save that.', 'start': 997.779, 'duration': 1.602}, {'end': 1005.026, 'text': 'And then we want to generate two components for reading and writing to our ng-arcs store.', 'start': 999.881, 'duration': 5.145}, {'end': 1015.276, 'text': "So I'm going to go back here and I'm just going to type ng, g for generate, c for component, and we'll name it read.", 'start': 1005.647, 'duration': 9.629}, {'end': 1020.662, 'text': "And then I'll hit the up arrow key and we'll call this one create.", 'start': 1015.296, 'duration': 5.366}], 'summary': 'Creating and importing modules and components for ngrx store', 'duration': 66.901, 'max_score': 953.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc953761.jpg'}, {'end': 1167.7, 'src': 'heatmap', 'start': 1052.225, 'weight': 3, 'content': [{'end': 1059.991, 'text': "That way we can define a property as an observable because that's what's returned from NGRX store when we're trying to access our data.", 'start': 1052.225, 'duration': 7.766}, {'end': 1067.236, 'text': "And then we're going to import our store, our tutorial model and our app state from the app state file that we created.", 'start': 1060.531, 'duration': 6.705}, {'end': 1068.257, 'text': 'All right.', 'start': 1067.256, 'duration': 1.001}, {'end': 1076.406, 'text': 'So next in the class, we can define a property called tutorials.', 'start': 1068.277, 'duration': 8.129}, {'end': 1079.809, 'text': "It's going to be an observable of type tutorial.", 'start': 1077.026, 'duration': 2.783}, {'end': 1086.475, 'text': 'And then in the constructor, we access the store.', 'start': 1082.792, 'duration': 3.683}, {'end': 1093.262, 'text': 'This is where we pass in our app state.', 'start': 1086.495, 'duration': 6.767}, {'end': 1102.131, 'text': 'And then right here we can just put this dot tutorials equals store dot select.', 'start': 1094.605, 'duration': 7.526}, {'end': 1104.633, 'text': 'And this is how, this is the really important part.', 'start': 1102.672, 'duration': 1.961}, {'end': 1108.917, 'text': 'This is how we actually access our NGRX store.', 'start': 1104.673, 'duration': 4.244}, {'end': 1113.04, 'text': 'In this case, we want to select tutorial.', 'start': 1109.957, 'duration': 3.083}, {'end': 1121.743, 'text': 'And this is coming from, by the way, like where is tutorial coming from? This is coming from our app module right here.', 'start': 1115.259, 'duration': 6.484}, {'end': 1124.405, 'text': "We'll rebind the property of tutorial to our reducer.", 'start': 1121.823, 'duration': 2.582}, {'end': 1137.273, 'text': "And then when this calls the reducer, then it's going to make a call to our reducer and we'll see that the action type isn't going to be add tutorial.", 'start': 1125.606, 'duration': 11.667}, {'end': 1138.234, 'text': "It's going to be something else.", 'start': 1137.293, 'duration': 0.941}, {'end': 1138.994, 'text': "It's going to be empty.", 'start': 1138.254, 'duration': 0.74}, {'end': 1142.757, 'text': "Default, it's just going to return the original state right here.", 'start': 1139.435, 'duration': 3.322}, {'end': 1145.078, 'text': 'Right So hopefully that makes sense.', 'start': 1143.757, 'duration': 1.321}, {'end': 1147.52, 'text': "I'm going to go back to our read component.", 'start': 1145.098, 'duration': 2.422}, {'end': 1148.3, 'text': "We'll save that.", 'start': 1147.56, 'duration': 0.74}, {'end': 1154.565, 'text': "And now let's open up the HTML.", 'start': 1149.481, 'duration': 5.084}, {'end': 1156.407, 'text': "Oops That's not the HTML.", 'start': 1155.026, 'duration': 1.381}, {'end': 1157.808, 'text': 'There we go.', 'start': 1157.387, 'duration': 0.421}, {'end': 1160.61, 'text': "And we're going to paste in.", 'start': 1158.688, 'duration': 1.922}, {'end': 1165.097, 'text': 'just a little bit of html, not much.', 'start': 1162.213, 'duration': 2.884}, {'end': 1167.7, 'text': "we're going to say i don't believe we need this here.", 'start': 1165.097, 'duration': 2.603}], 'summary': 'Access ngrx store in angular app to define observable property tutorials.', 'duration': 86.769, 'max_score': 1052.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1052225.jpg'}], 'start': 931.837, 'title': 'Ngrx store configuration and component generation', 'summary': "Covers the configuration of ngrx store with actions, models, and reducers, and the generation of 'read' and 'create' components for reading and writing to the store. it also explores reading from ngrx store, importing necessary modules, defining properties as observables, accessing store in constructor, and selecting tutorials from the store, with insights into reducer behavior.", 'chapters': [{'end': 1020.662, 'start': 931.837, 'title': 'Ngrx store configuration and component generation', 'summary': "Covers the configuration of ngrx store with actions, models, and reducers, as well as the generation of 'read' and 'create' components for reading and writing to the store.", 'duration': 88.825, 'highlights': ["The NGRX store configuration involves moving actions, models, reducers, and app state into the 'app' section, requiring the import of the store module from NGRX store and the tutorial reducer.", "The app.module file requires the import of the store module from NGRX store and the tutorial reducer, followed by the inclusion of the store module in the imports with 'forRoot' and the 'tutorial' property with the specified reducer.", "Two components, 'read' and 'create', are generated for reading and writing to the ng-arcs store using the commands 'ng generate component read' and 'ng generate component create'."]}, {'end': 1167.7, 'start': 1023.527, 'title': 'Reading from ngrx store', 'summary': 'Covers reading from ngrx store, importing necessary modules, defining properties as observables, accessing store in constructor, and selecting tutorials from the store, with a glimpse into reducer behavior.', 'duration': 144.173, 'highlights': ['We import observable, store, tutorial model, and app state from the app state file, to read from the NGRX store.', "The class defines a property called 'tutorials' as an observable of type tutorial, and the constructor accesses the store by passing in the app state.", "We access our NGRX store using 'store.select' to select tutorials, which is bound to the reducer in the app module.", "The action type in the reducer is shown to be 'add tutorial', and the default return is the original state."]}], 'duration': 235.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc931837.jpg', 'highlights': ["The NGRX store configuration involves moving actions, models, reducers, and app state into the 'app' section, requiring the import of the store module from NGRX store and the tutorial reducer.", "Two components, 'read' and 'create', are generated for reading and writing to the ng-arcs store using the commands 'ng generate component read' and 'ng generate component create'.", "The app.module file requires the import of the store module from NGRX store and the tutorial reducer, followed by the inclusion of the store module in the imports with 'forRoot' and the 'tutorial' property with the specified reducer.", 'We import observable, store, tutorial model, and app state from the app state file, to read from the NGRX store.', "The class defines a property called 'tutorials' as an observable of type tutorial, and the constructor accesses the store by passing in the app state.", "We access our NGRX store using 'store.select' to select tutorials, which is bound to the reducer in the app module.", "The action type in the reducer is shown to be 'add tutorial', and the default return is the original state."]}, {'end': 1665.84, 'segs': [{'end': 1197.771, 'src': 'embed', 'start': 1167.7, 'weight': 2, 'content': [{'end': 1169.703, 'text': 'if you were working with an api you would.', 'start': 1167.7, 'duration': 2.003}, {'end': 1172.947, 'text': "but uh, we're going to say right here, we just have an unordered list item.", 'start': 1169.703, 'duration': 3.244}, {'end': 1178.134, 'text': "we're using ng4 to iterate through our tutorials property that we defined,", 'start': 1172.947, 'duration': 5.187}, {'end': 1185.621, 'text': "we're passing in the async and this creates and also handles unsubscribing from our observable.", 'start': 1178.935, 'duration': 6.686}, {'end': 1193.487, 'text': 'and then we bind the href property to the tutorial URL property, which is one of the two properties of our tutorials,', 'start': 1185.621, 'duration': 7.866}, {'end': 1197.771, 'text': "and then also we're using interpolation to show the name here.", 'start': 1193.487, 'duration': 4.284}], 'summary': 'Using ng4 to iterate through tutorials and binding tutorial url property with interpolation.', 'duration': 30.071, 'max_score': 1167.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1167700.jpg'}, {'end': 1266.454, 'src': 'embed', 'start': 1212.783, 'weight': 0, 'content': [{'end': 1217.407, 'text': "So the first one is going to be the app create component, which we haven't worked with yet.", 'start': 1212.783, 'duration': 4.624}, {'end': 1222.232, 'text': 'And the next one is going to be the app read component.', 'start': 1218.228, 'duration': 4.004}, {'end': 1227.532, 'text': 'And again, these names, by the way, this is all basic stuff.', 'start': 1224.949, 'duration': 2.583}, {'end': 1233.257, 'text': "So hopefully you're not a beginner to, let's see here, to Angular.", 'start': 1227.912, 'duration': 5.345}, {'end': 1236.1, 'text': 'But this is all coming from right here.', 'start': 1233.337, 'duration': 2.763}, {'end': 1238.462, 'text': 'Each component has a selector.', 'start': 1237.361, 'duration': 1.101}, {'end': 1246.349, 'text': 'Okay So also, real quickly, I just want to make three rule sets in our styles.css.', 'start': 1238.722, 'duration': 7.627}, {'end': 1247.791, 'text': 'And this is the global CSS.', 'start': 1246.73, 'duration': 1.061}, {'end': 1254.658, 'text': 'style sheet here, and this is just gonna make it not look like absolute garbage.', 'start': 1250.373, 'duration': 4.285}, {'end': 1257.922, 'text': 'so nothing too impressive is happening there.', 'start': 1254.658, 'duration': 3.264}, {'end': 1266.454, 'text': "now let's save it and with any luck, if you have your ng serve command still running, There you go.", 'start': 1257.922, 'duration': 8.532}], 'summary': 'Introduction to app create and read components in angular.', 'duration': 53.671, 'max_score': 1212.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1212783.jpg'}, {'end': 1321.249, 'src': 'embed', 'start': 1288.743, 'weight': 4, 'content': [{'end': 1299.638, 'text': 'But if we go to our tutorial, then all we would have to say is save that, just get rid of that portion.', 'start': 1288.743, 'duration': 10.895}, {'end': 1300.239, 'text': 'there you go.', 'start': 1299.638, 'duration': 0.601}, {'end': 1305.421, 'text': "it's not there anymore, but i'm going to leave it there all right, great.", 'start': 1300.239, 'duration': 5.182}, {'end': 1308.683, 'text': 'so now we know how to read from our ngx store.', 'start': 1305.421, 'duration': 3.262}, {'end': 1314.105, 'text': "so now let's talk about writing to it and then to call our add tutorial action.", 'start': 1308.683, 'duration': 5.422}, {'end': 1321.249, 'text': "so to do that, let's open up our create and our create component file.", 'start': 1314.105, 'duration': 7.144}], 'summary': 'Tutorial covers reading from and writing to ngx store.', 'duration': 32.506, 'max_score': 1288.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1288743.jpg'}, {'end': 1651.97, 'src': 'embed', 'start': 1628.418, 'weight': 3, 'content': [{'end': 1636.122, 'text': 'All right, so hopefully it all came together near the end and now you have a very basic understanding of NGRX Store.', 'start': 1628.418, 'duration': 7.704}, {'end': 1645.447, 'text': "So, coming up in hopefully the near future, I'll also be covering NGRX Store as well as NGRX Effects,", 'start': 1636.682, 'duration': 8.765}, {'end': 1651.97, 'text': "and that's handy for more real-world use case scenarios when it comes to creating applications that you know.", 'start': 1645.447, 'duration': 6.523}], 'summary': 'Basic understanding of ngrx store covered, ngrx effects to be discussed in future for real-world use cases.', 'duration': 23.552, 'max_score': 1628.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1628418.jpg'}], 'start': 1167.7, 'title': 'Angular app development process and ngrx store tutorial', 'summary': 'Covers the process of adding components to an angular app, iterating through a property, binding properties, and creating rule sets in the global css stylesheet. it also discusses the basics of working with ngrx store, including reading from the store, writing to it, adding and removing tutorials, and future topics on ngrx store and ngrx effects.', 'chapters': [{'end': 1266.454, 'start': 1167.7, 'title': 'Angular app development process', 'summary': 'Covers the process of adding components to an angular app, including iterating through a property, binding properties, and creating rule sets in the global css stylesheet.', 'duration': 98.754, 'highlights': ["We're using ng4 to iterate through our tutorials property, and passing in the async, handling unsubscribing from our observable.", 'We bind the href property to the tutorial URL property and use interpolation to show the name.', 'Adding the app create component and the app read component to the app component HTML file.', "Creating three rule sets in the global CSS stylesheet to improve the app's appearance."]}, {'end': 1665.84, 'start': 1266.714, 'title': 'Ngrx store tutorial', 'summary': 'Covers the basics of working with ngrx store, including reading from the store, writing to it, adding and removing tutorials, and future topics on ngrx store and ngrx effects.', 'duration': 399.126, 'highlights': ['The chapter covers the basics of working with NGRX Store, including reading from the store, writing to it, adding and removing tutorials, and future topics on NGRX Store and NGRX Effects. The chapter provides a comprehensive overview of working with NGRX Store, including reading, writing, adding, and removing tutorials, as well as mentions future topics on NGRX Store and NGRX Effects.', 'The tutorial demonstrates reading from the NGRX Store, allowing the user to understand how to access data from the store. The tutorial demonstrates the process of reading from the NGRX Store, providing insights into accessing data from the store.', 'The process of writing to the NGRX Store is explained, showing how to add a new tutorial to the store. The tutorial explains the process of writing to the NGRX Store, specifically adding a new tutorial to the store.', 'The demonstration of removing a tutorial from the NGRX Store highlights the process of deleting an item from the store. The tutorial highlights the demonstration of removing a tutorial from the NGRX Store, elucidating the process of deleting an item from the store.', 'Future topics on NGRX Store and NGRX Effects are mentioned, indicating upcoming coverage of more advanced use cases and scenarios. Mention of future topics on NGRX Store and NGRX Effects suggests upcoming coverage of more advanced use cases and scenarios.']}], 'duration': 498.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9P5DTlg9oLc/pics/9P5DTlg9oLc1167700.jpg', 'highlights': ["Creating three rule sets in the global CSS stylesheet to improve the app's appearance.", 'Adding the app create component and the app read component to the app component HTML file.', "We're using ng4 to iterate through our tutorials property, and passing in the async, handling unsubscribing from our observable.", 'The tutorial demonstrates reading from the NGRX Store, allowing the user to understand how to access data from the store.', 'The process of writing to the NGRX Store is explained, showing how to add a new tutorial to the store.', 'The demonstration of removing a tutorial from the NGRX Store highlights the process of deleting an item from the store.', 'Future topics on NGRX Store and NGRX Effects are mentioned, indicating upcoming coverage of more advanced use cases and scenarios.']}], 'highlights': ['NGRX Store simplifies data management in medium to large size Angular applications, improving debugging and testing processes.', 'NGRX Store is built on top of RxJS, offering a crash course of about 59 minutes to understand its observable aspect, aiding in better comprehension and utilization of the tool.', 'The chapter covers creating reducers in NgRx, including defining initial state, creating the actual reducer function, using switch to determine action type, and creating an app state interface to bind the reducer to a tutorial array.', "The NGRX store configuration involves moving actions, models, reducers, and app state into the 'app' section, requiring the import of the store module from NGRX store and the tutorial reducer.", "Two components, 'read' and 'create', are generated for reading and writing to the ng-arcs store using the commands 'ng generate component read' and 'ng generate component create'.", 'The tutorial demonstrates reading from the NGRX Store, allowing the user to understand how to access data from the store.', 'The process of writing to the NGRX Store is explained, showing how to add a new tutorial to the store.', 'The demonstration of removing a tutorial from the NGRX Store highlights the process of deleting an item from the store.']}