Getting started with React and Redux todo app code walkthrough

in this video we're going to create a simple to-do list web application using react and redux we will create a redux store to manage our state we will also create a basic ui to list our items and allow us to create new items and finally we will also provide the ability to delete the items so let's move over to the code first we're going to use the create react app tool to scaffold our basic application structure now we're also going to install redux and react redux and now we're going to open our code in our idea we'll also spin up this server so we can view our application in the browser so that's the demo application in place okay just adding a new title so first thing we're going to do is we're going to create a reducer.js and we're going to create our initial state and we're just going to populate that with a to-do list with zero items and now we're going to create our reducer function it's going to take two arguments can take the state which we're going to default to the initial state and then it's also going to take an action inside a reducer we're going to have a switch statement switching on action type and then we're going to have a default state which just returns the state and then we're also going to export our reducer now we're going to add in our add to do case and then here we're going to return the current state then we're also going to append the current to-do's with our new to do which will be coming from the action payload and then the final case we're going to add is going to be our delete to do and that is going to again return the state but it's also going to filter the current to do's and remove a to-do item by id going to get the id off the action payload so that's our reducer function complete so now we're going to move over to index.js and we're going to start by importing the provider from react redux and then we're also going to import create store from redux now we're going to create our store using createstore and passing in reducer which we automatically imported and then we're going to add the provider and pass our store to make it available so now we're going to move into app.js and we're going to start by creating a to-dos component and then also a to-do input component and then we're going to render both of those to the ui okay and then inside of to do input we're going to call use dispatch and then we're going to return our input element and also a button element to add the to-do so we're going to create a new to-do and a set new to do call you date and then we're going to add new to do to the input value then we're also going to create a handle change function to set the new to do value as the user changes the input value and then we bind that to the on change event and that will keep the value in sync so now we're also going to add a handle click handler so this will be called when the user clicks on the button and that will then dispatch the add to do action the payload will be an object that will contain a label which will be the new to do value and then we'll randomly generate an id and then add the on click handler to our button so inside our to-do's component we're going to pull the to-do's off the state using the u-selector hook now we'll put a simple check to check if we have no to-do's so if not to do is just return a p element with no to-do's and then if we do have to-do's we're going to return an unordered list and then for each of our video items we're going to return an li element and then each li element will contain the to-do dot label yeah so as you can see we can now add multiple to-do's to the state and then they get rendered back to the ui so now we're going to add an on-click handler to each of our to-do items and so we can add handle click and then we're going to create a function and that's going to dispatch delete to do action and then it's going to pass a payload containing the id we just need to ensure that we're passing along that id for each element i just need to add the use dispatch hop call so now we can add to do another to do another to do and then when a user clicks each to do it then dispatches the delete action and removes it from the list and thanks for watching if you like this video please like comment and subscribe

Channel: UI Infinity

Views: 5,442

Keywords: react, redux, react-redux, react redux

Id: IebYX3Okh44

Length: 9min 56sec (596 seconds)

Published: Sat Aug 15 2020