ReactJS and Redux - Build 4 Web Apps [3/4] | David Katz | Skillshare

ReactJS and Redux - Build 4 Web Apps [3/4]

David Katz, Software Engineer - Coding Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 2m)
    • 1. Introducing the Course

      1:33
    • 2. Wireframing ReminderPro

      1:25
    • 3. Introducing Redux

      5:55
    • 4. Introducing Actions and Action Creators

      5:20
    • 5. Providing a Store and Introducing Reducers

      5:45
    • 6. Mapping Dispatch to Props and Binding Action Creators

      6:48
    • 7. Mapping State to Props

      3:03
    • 8. Rendering a List of Reminders

      5:28
    • 9. Deleting Reminders

      5:47
    • 10. Reducing the List Component

      4:25
    • 11. Timestamping Reminders

      4:14
    • 12. Interpreting Moments with MomentJS

      4:17
    • 13. Baking Browser Cookies

      3:26
    • 14. Clearing All Reminders

      4:33

About This Class

Become a highly-demanded software engineer by following this tutorial on React JS and Redux. As one of the most highly-paid skills for web developers, learning React will open doors and jobs for you.

 

This project-based course will have you coding right away. Building four carefully thought-out example applications in this course will sharpen your skills in modern web development.

 

First, learn the principles of React JS by building two applications. One introduces ES6/Babel, and the other how to handle HTTP Web Requests in React using an API. With the third application, learn how to manipulate browser cookies. Finally, you’ll create an entire app with full authentication and a real-time database to finish it off.

 

Also, learn the engineering of Redux. You’ll find that Redux boils down to three simple steps!

Don’t worry if you’re new to web development. Some JavaScript experience will help, but this course makes sure to explain every new concept thoroughly.


Take the dive into React JS and Redux. Let’s get started coding!

 

Also, here’s a link to the online repository for this course: https://github.com/15Dkatz/ReactJS_VideoGuides

 

Transcripts

1. Introducing the Course: welcome to an excellent resource on how to learn reaction. Yes and Redox. Congratulations. Learning react will put you one step ahead because it's one of the most highly demanded and paid for skills in the software industry. I designed this course with one overarching goal to get you to have reacted in a Redux on your resume and prepared to build your own react projects from scratch. In this course, you will build four applications. One will get you up and running with the principles of react and introduce JavaScript es six syntax. The next will using a P I and show you had a deal with Web requests In react. Third, you learn Redux. It builds an application that also stores information locally on the browser. And finally, best of all, we'll have a Redox app that has full up education for signing up users as well. As a back came database, I will explain every new concept precisely checking and measuring every fresh idea. That way you have a thorough understanding of the coat and engineering. Also, I'll let you in on a secret right now. Redux can feel complicated at first, but you can boil it down to three basic steps. All right, if you want to finally unlock the key to react and redux and add them to your skill set or you just want to brush up on your Web development chops, then this course is perfect for you. So what are you waiting for? Let's get started coding. 2. Wireframing ReminderPro: Hello. This is Reminder Pro, a sweet little application that lets you know what you need to do. And when you need to do it, it works. Pretty simply. Add your reminder in the input field and also the due date. So that way you know when to do it. So let's add a task. How about buy a gallon of milk? I'm saying it's gonna be do on the 31st of January at 12 You and they're adds to our list of reminders. Take care now. We could just have number due dates. But the application also decides to make these dates more readable and friendly to human interpretation. Another great thing about this application is we don't have to keep the Web app open for it to remember everything. It uses browser cookies. So if I refresh to store a history of reminders so that whenever you revisit them, you'll see your same reminders on the page. Also, we can delete reminders once you've completed them. Let's say I've already finished my English homework that I just deleted it. Also, we can delete reminders all at once. Once you've completed everything great, we'll learn so much more about react and the Awesome Redux Library. When building this application, I can't wait to get started, so let's do it. 3. Introducing Redux: before we move on to new territory with Redux code. Let's do something familiar and set up our application we use create react up once more, and this time we'll name it. Reminder Pro. So make sure you're in that directory where you create all your react projects. Great as its installing. Go ahead and posit video because I'll skip ahead to win. My application completes. Now, don't forget to navigate into your project. And then, while we're earning in the terminal, let's prepare ourselves ahead of time and actually install the reduction and react Redux libraries for future use. So we'll simply use NPM toe, Install Redux and React Redux and safe Great No one's open up our code and set up our first at component. I'm also going to run and PM start. So that way we could see her application as we continue setting it up so that that I have it all set up. The first thing I want to do is pay cement ified CSS file from Bootstrap online, so we can already start using the CSS classes to speed up our development process, Design wise said navigate to getting started with bootstrap. We'll find their latest compiled indentified CSS file. Now we need to find index dot html within our project and simply copy and paste it right above the title. Great. Never get back to our application. Now the next thing we're gonna do is delete the source folder and set up around. So that way we can start from a clean slate. Now let's create a new source folding. Then we'll create our index dot Js following the same pattern as before. Remember, we gotta import react from react well important are react dumb as well. From react. Dash down. Let's do react dumb, not render do simple did we'll save Reminder Pro? I didn't want our document element, but I d, which is root. Reload. And there we go. We see Reminder Pro showing up on the top left corner. The next thing we'll do is create our first component, but before we do, let's actually create a source component. Boulder. So a new folder components, and this time we're having a Components folder because we'll have more files to work with throughout this application, and having a Components folder will keep things very organized. So let's create our first component AP J Sex and then we'll import react and the component from react as well. And you guys probably know by now how this whole thing works. There is a problem. Typing even faster than me will export by default. This app I will render and return some JSX. We'll have an overall div whose class name is apt. Let's give our reminder pro component. A title class name is a title, and we'll say Remind your pro and now actually will already take advantage of react. Bootstrap. We create a form here. So our did class name will be form in line because we're gonna have an input field align right next to a button. We're gonna have a form group. We will have one text input for no. So our input the class name will be form control, and then our placeholder will be. I have two dot, dot dot, How mysterious. Then we'll add a button that will line right next to it. It's type will be button. It's class. Name will be one of the boot shop class, a mistress's Bt and short for button and buttons. Success would just makes it green. There's button danger button royal and finally are But name will be at reminder What save? And then, of course, we need to import the app with an index such s. So let's import AP from components Slash at then will place this JSX with our APP. JSX. Great. That's looking okay. We actually just need some styling a little bit later. But we can, however, move on to the actual functionality and get started with Redux. See you in the next video. 4. Introducing Actions and Action Creators: Now we want to add functionality to that ad reminder feature button right here before we do that, however, will need to set up our reduction application. Now, let's make sure you understand one of the very first principles of Redux. We have one huge store holding our application state. Once again, Store is a global object that holds the application state. It allows the state to be updated by dispatched actions, and it changes the state based on it. Listening to the actions that we dispatched throughout our application now intuitively, doesn't adding a reminder sound like a way that will change a state that will change the whole store? So we'll need some way to have an ad reminder action so we can update this store. But before we create such an action, let's review what a reduction action actually is. Actions are just plain JavaScript objects just like this. They must have a type property, so usually are type would be add reminder for ad reminder. And this type property simply tells, read us what kind of action is being performed, and they can sometimes have a payload key, which holds all the data or some other T, which holds all the necessary info within the JavaScript object, which we will use to use that action to update the store. So adding our reminder will mean having an action just like this. But we can't just create this job script object and expect something to happen. No, we need what readers calls an action creator, which is more like a function which returns the Java script action itself. So it returned this whole job script object. Now it can become confusing. What is the difference between an action and inaction creator? I know there's a lot of things to know, but to boil it down simply, the action is a JavaScript object itself, while the action creator is the function which returns that action or returns the JavaScript object. So let's finally start making this actual ad reminder action. First, we need a type of the action and host our types. We usually have a constance dot Js file within our source, if not the whole Constants folder. But for now, we'll just have a constant dot. Day is fun. Our first concert. It will simply be add reminder and this string following It can really be anything you like , because we're really focusing on this variable here to host within her application. So this could be a random string, a random number, but usually be just paralyze it and do ad reminder as well. Now let's add actions folder to the source. We'll have an index dot Js file within the actions folder. First off will import that ad reminder. Constant. Make sure I spell it correctly. Here we go. Let's go back. One directory to Constance and then finally, let's make this action creator. We'll call the function, add reminder and declared as a constant. It's gonna be an anonymous era function. It will have one surrender the text we're gonna pass. For now, let's define an action within here. Remember, we have that type and it's going to be add reminder which reimported over here. Our data will simply be The text in this text I remember we can use is six short hands in tax when the key and the value are exactly the same. Now, before we return this action, we're going to console dot log it. So that way we can understand what is going on as we do. Buck are advocation in the future. And then let's return the action. And I just noticed one thing I didn't create index dot Js file I just created a J s file. I didn't Index Dajae s father. So say index dot Js We'll move everything from here. You probably didn't make the same mistake and I'm going to delete this over here. Yes, save us. Great. Now that we had this action set up, we're still not going to do anything with this button yet. There's still a little more to set up with Redox. But don't worry, stay patient with it. Read us is so awesome when it finally comes together. And trust me when I say that when you're building a huge application Redux, make sure to keep it very simple for you, despite all the initial Senate at the beginning. So let's move on to actually hook up this action to our application 5. Providing a Store and Introducing Reducers: we have one more step to consider in setting up our Redux application. We need to think about initializing the actual store right now. Although we have inaction Creator for adding reminders recent I have no idea what the state is for global application. What we need to do is set up a provided component from React Redux that will pass down its store to our entire application. Never get to index dot yes, and we import provider from React Redux. Now, adding a provider is simple. Just ride that app tag within a provider tag. Here we go, and as we save, it might seem like we already have store for us, but as you can see, we get an air here. It says that the prop store is marked as required and provider, but its value is undefined. So let's create a store we'll import, create store from reading. Let's declare a constant of store as creates store, which is a function, and then we'll pass a store key to provider at a store. Let's reload. And now, one says, expected the producer to be a function. So let's think about what a producer actually means in terms of reduction so that we can pass one to this store. If in re ducks, all the applications state exists as a store or single object, what reduces do is simply take the state in an action and return new state so producers based off in action will modify the state in a pure away. There's a huge rule to note with reducers, you must never you take the state directly. This will cause huge performance airs. So what we do is take the state and return entirely new instances of it rather than simply modifying it. With that being said, let's create a reducers folder within our source and then declare an index dot as fun. First off, let's import the ad reminder Constant from are Constants Holder. And to begin, we'll have one producer as a constant by the name of reminders. It will be another anonymous arrow function, and we'll have two parameters, a state parameter pre initialized to an anti array as well as in action parameter as the second argument. Now it's initialized, available within a reminders reducer called reminders. It will simply be no later on. We'll changes reminders variable to become a return state. So remember that our action returns the type we could use that type to understand exactly how we want to modify our reminders for a state. So we'll use a switch statement on the action type because we can expect more than one type of action in the future. Besides, add REMINDER. But let's consider our first case, which is ad reminder in this case, will change reminders well sent reminders again to an arena. And then we're gonna use a neat idea. Six. Trick called the spread operator will spread on state, and what the spread operator allows us to do is copy the contents of one or ray or object into another rate or object. It's very convenient. So the first element in reminders of rain will be this current spread state, and the next one will be a new reminder with our actions. Now, we need to define this reminder functions so above let's define Helper Reminder Function, which takes one argument for action as its parent will simply return object as a reminder with the text of action dot text and then and I d of a random variable Awesome were very close. Now we need to keep setting up this reminders reducer. Let's Consul, don't log are reminders as state. So that way we can debug in the future. What would turn reminders, of course. And don't forget in a switch statement, we always want the default and by default will return the state from above. And we're very close. We just need to export. Our producer said that way other modules can recognize it, and now we can head back to index touches to finally fix this air. Now, before we move on, some of you might have to reload your development server by having control C and doing NPM start over again because we just added a new month. This is it reloads. Go ahead and wait. And finally, we can import producer from our producers and then we'll simply argue the producer within our store. Great. Looks like our reducer is working now. And we just spent a lot of time thinking about reducers stores and providers, some really fundamental Redux concepts, and we've actually moved one step closer to actually changing our application State with Redux. Awesome job 6. Mapping Dispatch to Props and Binding Action Creators: Now let's try to hook up that action creator we made to her application. First off, we'll need to do some setting up with their input field and button. We need to add some states of the component, so that way we recognize what the user types in the text field. So let's add a constructor. But props remember, we need super props is the first line. We'll initialize them State as an object. A lot of text of blank for now and then on the input field will use are familiar on change function. Just like before. We'll have event variable, actually, and we'll set the state of our text. Two. Event. Don't target. Don't value. Next. Let's define an ad reminder. Help fermented with their application so that we can simply council dot log the state for nothing but say and reminder in this function will simply log the state this start state and let's attach it to this button. Click. So on click equals this stuff. Add reminder. Cool slit. See, Let's say I have to buy groceries at runner and there we go. We have our text as buy groceries in state. Great. Now that we see our techs logging. We can move on to connecting our component tour store and the action creator we create to connect to our store in this component will need to take advantage of react. Redux is connect function, so we'll import the Connect function from React Redux. This connect function works by hooking up two functions to react. Component first connects a map states a props function and Matt dispatched to props function. We will have to think about Matt State to props yet, but we will write a function called Matt Dispatcher prompts right now because we'd like to hook up our ad reminder action creator to applications. So before we do that, however, let's important reminder from our actions as we save reload and then at the very bottom after a component, let's define and that dispatcher props function, math dispatcher props. It is very simply camel cased just like this. So in that dispatcher props, we need to abide the action creator to this application, and to do so will need a specific function called Bind Action Creators, its import that now import bind action creators from the regular Redux Library. And I'm gonna move this above. Add reminder. Awesome. Now let's declare that special matte dispatcher props function and passed the dispatch argument. And then we're gonna return the bind Action Creators function that we just imported here as the first argument will have an object with our ad reminder function as well as the dispatch as a second argument. So bear with me here. I know this looks very complicated, this function right here, but it will make clear sense. What's it all hooked up, and we begin to use it. So there we go. Now we need to connect it to our component will call the connect function from Redux. I remember our first argument should be map state to props, but we don't have that defined yet, so we'll call it. No, but we do have a map dispatch of crops, so argue it here. And then we'll have our app component finally hooked up, Let's say and then within had reminder we'll also logging the state. I also want to see props. So let's just take out state and log all of this because I want to see this dot props. So that way we can see it. Add reminder. Actually, mapped to our component. So let's say once again we have to buy groceries and check it out. We have a proper object, an inner pots object. We now have our ad reminder function from Bind action creators. Let's check out our actions once again to see how add reminder works. Remember, we only need to pass text to the ad reminder function. So within her ad reminder helper method, let's call this stop props dot and reminder and pass our state text. Remove this console log, let's say and let's see what happens. Well, we have an action. An ad reminder of type. Add reminder text, buy groceries and check it out or reduce er. Also luck, since it recognizes action. Ah, whole new array estate, including our object with an i d. Of a random I. D and R Texas groceries. Looks like reduction is working awesome. Let's review what actually happened with Matt dispatched to props, Then what map dispatcher props essentially does is it binds the action creators that we create to the overall dispatch function throughout our whole react Redox Application Mason accessible as props within this specific component. When we call the Connect feature Now there's a little shortcut. Weaken do, Since we're only adding add reminder. Instead of having a whole map dispatch of props function, I can simply haven't object here in place. Add reminder as Mikey and Value and take out map dispatcher props entirely. We'll save. Wait for it to reload. Let's do you buy groceries once more and you'll notice that it still works. And now we don't even need to import buying action creators. So let's take it up. It's a nights little shortcut that Redux provides for us. Cool. Now let's move on to actually adding map state props so that we can update the Redox State with our action and recognize it on our user interface. Excellent work. 7. Mapping State to Props: let's define that state to props so that we can recognize the Redox state within this component map. See to props will work very simply, we argue, a function within the first parameter of reductions connect function. This allows us to listen to a state as an argument with their past function. So let's define map state to props right here. Camera case it. Like I said, we have state as one of our arguments. For now, we'll simply consul dot law, the state as state, and now we can simply pass in that state to props to our connect function. Don't forget to save. Now let's inspect the element. So that way we can see what happens when we add a reminder. So right now it's saying maps into props and connect it must return to play object. Well, don't worry. Let's see what happens when we decided to add a reminder. Anyway, let's greet grandma. Okay, we see a new state over here, and it's our object, as you can see with our I d and the Greek grandma text Cool. So it's telling us to return a plane object, and that's exactly what we're gonna do. We're going to turn a plane object with are reminders as state because this looks exactly like what we want are reminders object to be were reminders are rate to be Rather, This is because in index dot Js are reminders. Reducer is the global reducer for our entire application. After saving this, let's delete the console log of state and simply consul dot log props within a render function and see if it updates. I say this Stop props, save cool and let's say yeah, we had to greet Grandma and they're props goes So after we add our reminder, the props here has are reminders and it's our rate of one awesome. Let's take a brief moment to appreciate the beauty of Redux. Redox gives us so much power because we can access this part of our global state in any future component that we create. We simply need to connect our component to the global state in a similar manner that we did here with the APP component and then we combined any action creator redefining in the future in order to update the state of all of our components and our entire application now , in our previous applications. We simply passed down state from one component to the other because we had very simple problems of managing data. But imagine an entire social network Web app like Facebook or Twitter could definitely benefit from having an implementation like Redux that allows each new component to access the global state. And I believe you guys will be training these kind of social network applications, things that are really complicated. Regardless, we now have a reminders in props. So let's expand upon the user interface to show the user that they actually submitted a reminder once and for all. 8. Rendering a List of Reminders: Let's build a component that handles rendering are reminders. We now have reminders and props, and everything works fine, but the user just doesn't know that yet. So let's define our render reminders. Help render Reminders in this method were returning on ordered list of reminders submitted by the user. So first up want to access are reminders Remember we can use. And he has six trick whenever are variable name and the property that we want is exactly the same. So let's council don't log reminders to check that this is actually working before I do. So I'm going to leave this concert. Don't log props. Otherwise it's gonna blow up our consul before you move on. We'll actually need to call this, not render reminders in our JSX And these curly braces allow us to just render or use a function within the JSX itself. So let's say I have to. You buy some groceries, we'll add a reminder. And right now the reminders have been empty. But as soon as it's not empty, we get an array with our object. Great. So now we can get rid of that consul log we know are reminders. Variable is working. And now we can actually move on to building the UN ordered list and JSX that will control rendering our list over miners. So first off, remember, with JSX, we always want to return the JSX. We just can't write it up. Then we'll have a new ordered list. First, our classmate for the UN ordered list will be some react food shop class names. So let's group list dash group space. We're gonna use the column, sm four, which is just a nice sizing that fits our application. We'll have another curly brace in this time. We're gonna map over reminders so we can render each reminder individually as another list component. So again, we need to return the JSX. We'll have a list j sex tag. Our key is gonna be a reminder that I d remember. Each of these reminders has 90. And then this class name for this list component will be a list group item. So it's an item in this list group that we created with a Norden list. Cool. Then we'll have a development with just our reminder text for nothing. Let's save and see what that looks like. So if I have to my groceries. There it is. What they have to greet Grandma. No. And there it is, showing up in a very nice list. Now I don't want it to be in between the button. And they did. Actually, I want to speak after the whole form components. So let's put it after I'll save then once more every grandma. All right, cool. And while we're at it, it's about time to add some of our own CSS to this application. Just so the appearance looks a little better. So let's define a new CSS file globally within our source folding. So it's a new file index dot CSS. The first thing we're going to target is our at component. So remember, we haven't at class name. Let's go ahead and give it some padding top of about 20 pixels. I don't want it touching the signs anymore. I'm going to give it a display of flex the flex direction. Everything is going to be column because if you do it by row, everything will now be side to side. I want to be normal in the normal one is calling that you see right now what's the line everything to the center. Now our title also should have a textile line of center. Let's make it significant. We want the font size to be bigger. Let's increase it to 26 pickles Now. The last thing we need to do is include index CSS within her index dot Js. So let's import simply index dot CSS from the same directory. I will say it and ah hah, that looks so much better as a resize. A little more. You can see that this is a true in line component. So let's say I have to What's again? Buying groceries haven't done it yet and this is looking a lot better now. I do think this could use a little spacing. Let's go back to CSS and then change up the inflict component we want change all inputs. It's okay for right now, because if you only have one later on, you might want to use a class name. We're just gonna get it a margin of five pixels and then for app. Let's just call this the reminder for and then our reminder form is gonna have some padding of five pixels. So let's check that up. Okay, that's looking really good. And let's say I have to go fishing Sweet. That's looking really nice. So now we can move on to actually implementing some functionality to delete items from this list. Let's say I actually went fishing Well, I got to get rid of that reminder now because you already reminded me and it did it, so let's move on. 9. Deleting Reminders: Let's give the user a way to delete the reminders. We'll add a little JSX to our components. So that way the user has a button to click that allows him to do be a reminder from the list. We'll have a very simple div right here. Let's give it some class names. This is going to be a list item component and also be called to leave. But now, right next to it, we're also gonna call it list item because we're in apply to stylings at once to both of these is that they would they render next to each other so for Italy, But we could have a very simple X whoever let's use a little Unicode icon to make it look a lot better. This Unicode icon is add hash X 2715 and basically looks like a very meat multiplication side. And don't forget about that semicolon. So when we're thinking of deleting a reminder, that definitely sounds like an action that changes the state. This means we're adding to our readers logic in the application. Whenever we add, read us logic. We need to really think about it in three steps. First we define a constant. Secondly, we make an action creator and third, and finally we amend or create a reduced so to start it all, remember, we need to create a new concept. So head your conscious dot Js Bach. Let's export new constant and call it delete Reminder equals delete for my Now we're right . The actual function, which handles deleting are reminders within index dot Js of actions first, like the sport new constant called Delete Reminder. And for now, let's just have an empty anonymous arrow function. Now let's think about it for a minute. In order to delete. Reminders will need a way to identify them. Luckily, recreating an i d for each reminder within our reducer so that we could specify. So let's add an i d parameter to this argument. Now let's start defining our action. Of course, we'll need to import delete reminder No, from a constants. And then this action, of course, needs a type, and this type will be delete remind. Now we need to think about what info we want. Action to help. Let's just have i d. And this key will be idea no as well as a value that we pass into elite remind before we move on, Let's say council dot log deleting inactions. All right, so that we have a way to debug in the future. And finally, let's return that action. Next, we gotta hook it up to her application. So let's important elite reminder from actions Now. Now we need to add this to Ramat Dispatch of props function. And remember, we use it. Need Redux trick toe, actually get rid of that map dispatched to props declaration so we can just place delete reminder. Next to add reminder. Here and now we see the beauty of Essex coming in handy. We have multiple keys, but it really shortens down our code when we don't have to specify every time what the values of these keys, since they're just the same. Now, let's hook up a helper method to the click of her JSX button that we set up earlier so we can see what happens versus add a delete remind your helper method. This one will also have an I. D. V. That's council dot log deleting in application. This i d. And for now, what's council log props? Just a check If we're actually having daily reminders showing up in our map. Dispatcher props. Finally, let's hook up on click event to the div that were created earlier. So say on Click Anonymous era function to call this dot delete reminder. And remember, we need to pass the I. D. So it's a reminder that I d Let's say we'll have a new reminder. Go grocery shopping. Let's inspect the omit first of all, and then click the expert boom. So this stop props. We see that we have a daily reminder actually dispatched and leading an application received the I D that we want to delete Grape Now we added these CSS elements, so let's go ahead. And to find those enlist item, I want the display to be in line block. So that way they align side to side. And then our delete button is gonna float on the right and have a padding left of five pixels. So that way it looks pretty nice. You'll see, huh? I forgot to specify that Float is separated by a colon and one more time, let's say go grocery shopping, Boom. Great. So now that we have our action creator actually dispatching delete reminder. We need to amend the producer to actually change application based on this dispatched action. So see you in the next video. 10. Reducing the List Component: No, but we have a way to despatch our deliver. Um, under action. We need to recognize that within our reminders reducer. Then we can update the state for application to actually remove that reminder from the list . Let's get started adding remove reminder capability to a reduced we need to import to leave reminder from Constance. Then we'll add to the switch statement to handle delete reminder case as well. Pretty hit case. Delete Reminder. Now, as a rule are reminders or whatever. State return cannot be modified directly. We need to handle our state in a pure way and not directly modify our state with any functions for manipulating or raise like spice push or pop. And those sounded like dance moves. So instead, let's keep it cool, keep it pure and have a removed i. D. Function returns in its Harley New Array based on our current state and I d with the same state except the object we specified removed. So let's declare that remove i d function right now removed by i d. It will have two parameters. First, a state parameter initialized to an interior, just like a reminders reducer and also an I D primer. Next, we'll take advantage of an array filter in JavaScript because filters just like the map function, return entirely new arrays of data rather than directly modifying them. So let's declare her reminders constant, and they will say, It's our state but filtered one reminder at a time. And this looks like just like anonymous arrow function. And what we want to do is filter out the reminder whose I D is equal to our past. I d. Now the filter will turn anything that passes are a quality check solar return instead, whether or not the reminder dot i D is not equal to the i D. So that way we have an array of all objects not equal to the one whose idea was specified by clicking it. So we'll say Who's reminder dot i D is not equal to the idea that we specified. Let's log our new reminders our new reduced reminders rather and return it. Finally, let's add this function, call to her delete reminder case. So we'll say reminders is equal to remove my I d will pass our state, as was the action got I D that we specified in our action. And then let's go ahead and return our new reminder state. Now, before we save, I'm noticing some errors with our actual function decoration. We need equal sign here as well as an equal arrow sign here for our actual arrow function. So you guys probably caught that. So don't say before you do that, So go ahead and save. And now let's inspect the moment to see exactly what is going on. Let's add a new reminder. Buy groceries and let's see if we can do it now. Notice Nothing happened yet. That's because an app that JSX were still forgetting to call delete reminder from our dispatch action. So let's go ahead and add that call save. Once again, let's by our groceries Click X and check it out. We have a new reduce reminders to empty array, and there it is deleted. So it's at a couple buy groceries boom, boom, boom that we are deleting them. Buy groceries again. I will have buy groceries one and buy groceries, too. So let's say we did one first, and then we did the first buy groceries and then we did the second buy groceries so you can see that it's working spectacular. We're getting better at Redux and setting it up more quickly, and hopefully the read US logic that we're learning is now becoming clear. It will only become more intuitive as we continue building this application, so let's move on. 11. Timestamping Reminders: At this point, it seems like we have almost a complete application. Still, we can add additional functionality to make Reminder Pro even more useful to the user. Usually, reminders have a date attached to them a certain time that the person has a complete for the reminder. So let's add an extra input field to the JSX that allows the user to select the time that the reminders should be do. Let's add another input field right next to her 1st 1 This one's class name will also be formed control, but its type will be daytime local, which will come in handy because it pulls a calendar selecting view. Now we simply need to initialize a due date within our text within our state. Rather set it to an empty string. Now let's take advantage of the on change function, just like above how we do with text So having event variable, then we'll set the state of are due date to this input fuels event. Duck target don't value great, let's say, and as you can see, we now have a calendar view we can put sometimes in. Now that we have our JSX set up, let's think about what? Adding a new property to her ad reminder Action creator means in terms of our Redux logic, I, for one, will have to amend our actual action creator to return not only the text value but also the due date that we pass. So let's go to our action creator. We had add reminder here, and let's allow to have a second parameter of due date, then very simply will not only return to texting shorthand, but also our duty. This key will be fine because it exactly maps to the value that we pass. Remember Essex shorthand. Next, we'll need to think about adding reminders in our reducer. So head to your reducers and head to the helper reminder function and notice our producer simply takes an action. Right now we're mapping text to action, doc text Whoever ever passing due date interaction. We can also simply grab our text and her due date all at once by equalizing it toe action. And those are the Essex coming in handy again. Let's remove this text action dot text right here, please. Text after i d as well as our duty was, he had that safe. That should be enough to have due dates within all over action objects for reminders. Now it's simply a matter of changing up the act of GSX. Call for ad reminder. So we also want our state of due date to be passed to our new ad reminder function. For now, let's council log to see if we're actually getting a due date. Let's pass it it this that state that duty would save. Let's inspect the element now and at our first reminder to see what's going on, Let's say I have to go to the dentist. This reminder is going to be on Saturday at three oclock Pierre and cool. We have reminders in our state, and these objects now have due dates within them. Awesome. So now that we have some dates, we could throw these onto reminder cards. However, we can make them even more understandable to the user by using some job script tricks. Unless you want to throw this date string on there. So see in the next video where we start actually including this data on the user interface 12. Interpreting Moments with MomentJS: first up. Now let's include this due date. Within our remind, your rubs very simply will add an element next to our due date text and have a diff that wraps around our reminder duty. So going to render reminders, find your reminder text and let's have another DIV next to our reminder text. That is just a reminder dot due date. Now we want to wrap this whole thing as a list item itself. Let's wrap our reminder text around a div. Another days in closing tag and go ahead and grab that reminder detective. Place it next to it. That way, it renders right next to our delete button. Now go ahead and save. Let's add another reminder. Go to the dentist once more. I know it. Pick a random date, say, 12 PM and there we go. We have our reminder texts rendering right at the bottom. Now I want to accentuate it. An easy way to do that is taking advantage of some war JSX and wrapping it in an end tag, which is short for emphasize, which will essentially give it a night italicized look. And then, once again, we have to at a reminder 12 Cloth Pete and cool. So now that it's emphasized, we have it in italics. So our dates looking nice, but it just seems like something a robot might want to interpret, not human users. So we want to turn this JavaScript string into a human friendly timestamp. Luckily, software engineers have already solved this problem by writing entire libraries devoted to this exact functionality. So let's head back to terminal and install a library called moment. Make sure you're in your actual project directory, so coating React, Reminder pro or whatever directory that you have your react projects in an NPM install moment and safe as a side note. The great thing about developing with react is that you will have access to the thousands of JavaScript libraries out there already to improve your application. It's just a few clicks on Google, a couple of minutes of reading and an NPM install away. So now that we have it installed an important moment from moment at the top of our JSX application, it's important moment from I won't Now let's add some moment logic to our reminders due date, so find the reminder due date, and we use moments from now Function, which takes a job script date and return to the human friendly shrink interpreting that date. So first off will me this text to be a JavaScript date. So let's declare a new date and argued the reminder Due date as the first prender. Now we need to write this whole thing in a moment. Object, and then we'll go ahead and call from now. Camel cased. Let's save and check how it looks on the reminder pro application. So once more, I still haven't gone to the dentist for 25th 12 p.m. And awesome. Doesn't that look so much better? Incentives. Having that we're looking JavaScript String, which says 2017 1 25 t 12. It just says in 11 days, nice and meat. Now let's add some additional functionality process. The most lacking thing with this app, component or application in general compared to other ones is that whenever we refresh the page, we start with a clean slate. However, ideally we want to access the same reminders we added before, whenever we revisit the application so we can take advantage of cookies in the user's browser, have a local history of all of their reminders. Let's implement that mixed 13. Baking Browser Cookies: Let's solve the problems of users needing to re add all of their reminders every time they come back to the application. One solution is to store all of the reminders in cookies. So rather than writing a whole library for cookies ourselves, the sick advantage of an NPM package called SF Cookies it was built specifically to handle giving a react projects access a browser cookies so head back to the terminal and run NPM. Install SF cookies Now we need to think about when we actually need to deal with star and cookies when we add a reminder. Well, we always deal with changing are reminders in state within our reducers, so it makes sense to bake cookies and remove cookies whenever we add a reminder or delete ERM under so it back to your reducers index dot Js and let's import two methods from SF cookies. They cookie and read cookie from S F cookies. And these methods are snake taste rather than camel cased when you have this underscored separating it rather than a capital letter. Now it's at a call to Big Cookie in our ad reminder case. So let's remove this council don't long statement. And let's just say we want to big the cookie and this has two parameters. The first parameter is the actual flag will want to you Baker cooking in. And then it's the JavaScript object or array that we want to start. So big cookie of reminders to are reminders all right. Now that should be sufficient enough to add the reminder cookie to our browser. However, we also want to read any cookie that we may have previously saved in her last visit to this application. So let's add a call to read cookie of reminders at the beginning of our producer. So we'll say that our state is equal to read Cookie of Reminders so this will initialize rather than an NT array. Whatever we have stored in read Cookie of Reminders. Cool, let's sets it up. So go ahead and save nothing to show up yet. But as soon as I add something new like go grocery shopping with a due date of Friday to the 20th at one PM, it says go grocery shopping in six days, some going to refresh boom, and it is still there. Great. So now that we see reminders working after a free fresh. Now we just need to store a deleted, a reminder as deleted whenever we delete. And it's a simple as this. We're gonna have another call it a big cookie with the same reminders flag. Also bake our new reminders. So we're passing are updated a rain and it just replaces the cookie that was stored previously. I'm gonna go ahead and hit. Save. It'll reload. Here we still have a reminder. Let's delete it now as a reload and it's still gone. Great. Now that we see that working, let's add one more feature. How about attempting to clear all the reminders at once? So see you in the next video. 14. Clearing All Reminders: Let's add one more feature to this application, a button, which allows a user to create all of their reminders at one gulp. Let's approach your redux logic first. Remember that whenever we add new functionality to our Redux application, we approach it in three steps. For the first step. Let's add a new constant to the constants dot Js fuck. We're going to export a new constant called clear reminders instead of equal to clear reminders. Let's go to our actions Index Duchess and Export, a new action creator called Clear Reminders. Export caused reminders. Make sure we have arrow function defined. And with this old, we won't need to pass any data. Let's just return in action or plain JavaScript object with the type clear reminders. Now, of course, we need to make sure that we imported clear reminders from our constant fuck floods. Add reminders from Constance, and then we'll have returned object whose type is clear reminders year for months now, we'll have to amend our reminders reducer had to index such s of producers. Let's import clear reminders, first of all, and then we'll amend our reducer to handle one more case. Clear reminders. We'll set reminders to an empty array. And then we'll make our cookie once more with our reminders, flag and reminders. So that way it gets stored would never re clear reminders. And then we need to return those reminders. Great, Let's save. And at the JSX button that will call are clear reminders. Actually, forget I had to act that j sex head to the render function. And after this dot render reminders will add a new DIV element. It's class Name will be TTN and button danger, which shuts the color to red and on Click. We'll simply call this stop props, not clear reminders and in the text. Well, simply write clear reminders. Now, before this works, we need to make sure we bind this action creator to our props. So is added next to delete reminder at the bottom of our connect function, clear from unders and at the top. I'm gonna check if we actually imported clear reminders from actions and we haven't yet, So let's go ahead and import clear reminders from actions. Let's save and test it up. So there's our nuclear reminders button. Let's say I have to go grocery shopping, Of course, on the 18th 12. So that's one reminder. Let's say I have to go fishing with Tom. I don't know who Thomas, but it seems like he wants to go fishing. So let's say we're gonna do that on the 31st and one last thing. Let's say I have to visit the dentist. Run and let's go ahead and clear the reminders and they're they're all gone and is not reload. No more reminders. Magnificent. Everything is working, and we just completed our first Redox application. Congratulations. I hope this helps shed some light on the sometimes complex looking library of Redux. It really doesn't feel too complicated when you remember to think about it into three steps of having a constant and action within action. Creator in the reducer All to store are one giant state object we learned so much more about React, learned some new tricks and, of course, all about the Redox Library. When Building Reminder probe, there's a summary and challenges portion next, and coming up. We have a whole other redux advocation toe work through, and this time it will include authentication on a server. So can't wait to get started coating with you. There