React Redux Todo App Tutorial | Learn Redux with Redux Toolkit

redux can seem tricky but it doesn't have to be it's a great technology that can help you build better react apps in this video we will learn how to use redux toolkit to set up redux in less code we will learn about the different parts of redux and we will look at how to do api calls and redux using the fetch api i will show you how to get the starter code if you want to follow along you can grab the finished code from github at any time if you need to compare your code to mine let's get started okay so if you want to follow along with the tutorial i've provided some starter files that are on the github repo for this project so all the links are available in the description what we want to do is clone this repository so just grab the clone url open up a terminal and then we'll just do get clone and paste in the url once it's been cloned we'll do cd react dash redux dash to do dash app slash starter this will open up the starter folder in the terminal and then we'll do npm install once it's installed we'll do npm start and this should open up a browser and start the application for us okay so we'll just walk through the starter code and get familiar with the different components so we have app.js which is the main component in the app we're using bitstrap for some simple styling we have our header we have an add to form which consists of this input and this button we have the to-do list which holds the list and then we have the total items which shows the total number of complete items all of this data is hard-coded with some dummy data at the moment so if we take a look at to-do list we've got an array of to-do's with some hard-coded values we're then using the map function to display each of the to-do's in our array as a to-do item component so we pass some properties to three item and those are the id the title and the completed value if we look at to-do item this is just displaying an item with the input the title and a button so all of these components are in the components folder if we have a look at the add to the form this is the form at the top we have a form here which has the name our input and the button we're using a state value to store what the user types and we have an on submit function this gets called when the form is submitted and the last component to look at is the total complete items and this just has a hardcoded value of 5 for the minute so it doesn't correctly reflect the ui but that's okay since we're going to change it later whenever we pull our data from redux redux is made up of actions reducers state and the store each thing does one specific task so let's walk through an example to see how they all work together let's say we have a react component that lets us deposit some money by the click of a button when we click a button we usually call a function this is where we dispatch our actions so dispatch is a function given to us by redux that lets us trigger an action so our component has an event handler function that gets called which calls a dispatch function the dispatch function then dispatches an action the action contains a type and a payload the type is typically just a string with the name of the action in this case it's called deposit since that's what's happening the payload contains the data that we need to know about in this case we can't deposit any money without knowing the amount so in this case the payload is 10. the store then receives the action and is in charge of holding the state you can think of it like a database in a sense which holds all our data in one place the store is also in charge of updating the state based on the action and the current state so it does this by using producers as you can see here so the current state gets passed in and our action also gets past them a reducer sounds fancy but it's just a function that takes the current state from the store and the action it combines things together and returns the new state so if you think of it like a conveyor belt it takes the old state it takes the action it does some work in here and it spits out the new state the store then saves this new state which is returned from the reducer in this case we get back 10 and passes the new state to the components which causes them to re-render displaying the new data why do we need all this stuff well imagine if we had an app with hundreds or even thousands of components it would become unwieldy to pass the state around and remember what component is changing the state and how it's changing the state and so on so by breaking things up like this we give different different responsibilities to different things and we keep all our state in one place this makes it easier for us to understand the flow of data in our app and easier to test for example we can test reducers in isolation since they're just pure functions we can test our actions this patch correctly and that our store correctly saves the state okay so we're going to use redux toolkit to set up all the things we need to make redux work so if we go into our code going to the source folder we're going to create a folder called redux and in here we're going to create a new file and it's going to be called store.js so we'll open this one up first thing we want to do is import configure store from at redux js slash toolkit the configure store function does all the hard work for us it creates a store which holds our state it combines our reducers and has some nice built-in middleware that we'll use later the configure store function gives us back a store which you can export like so export defaults configure store this allows us to link the store to our app which we'll do in a second we need to pass our registers to the configure store function which we can do by passing an object so in our configure store function we'll open some braces we'll take a new line and then we'll say reducer and this is going to be an object this object will hold all our reducers we haven't created any yet but we could have as many bridges as we want in here what we're doing here is creating this store as you can see in the diagram to the left here we have the store and the store holds many reducers when we create reducers we'll come back and add them here so now we just need to connect the store to our app so if we save this and we will jump into index.js and the first thing i'll do is import our store so import store from open quotes dot slash redux slash store like so and then we'll import a provider so the import open our braces type provider from react redux and down in our jsx we'll take a new line around line nine and we'll type provider and then we'll close this and then we will say store is going to be equal to our store that we created in store.js and that we have imported at the top here now all we have to do is take a few lines inside of our provider and we will cut our app and paste it inside the provider just like so so now our app is wrapped within the provider which means it's got access to the store and we just passed the store that we created to the provider so now our app is linked up to our store and our components have access to the state that lives in the store okay so next we'll create our slice a slice gives us a way to store a piece or a slice of data and gives us all the things we need to change and retrieve that data you can think of it like a grouping of data similar to how database tables work so the first thing we'll do is we'll jump into your code in the redux folder we'll create a new file and we'll call it to do slice.js the first thing we'll do here is import the create slice function so the import whenever this is create slice from at redux js toolkit and we just have to call this function so we'll say const to d slice is going to be equal to create slice so the create slice function will give us back some stuff and assign it to the to-do slice variable this is where we get our actions and our registers from which we can export so that all our components can use them we need to pass some properties to this function so it gives us back the right things we'll do this with an object so in our create slice function we'll open up some braces and take a new line the first thing we need to add is the name so since we're in the to-do slice we'll call this one to do's next we'll add the initial state this is going to be an array of objects each one representing a to-do so this can be blank initially or empty but we're going to add some dummy data for now just so we can see what's going on but for near a we'll add braces and we're going to give each one an id so say id one i'm going to give a title so we need to do one and then we need to know if it's been completed which is going to be a billion and first one will say false so we'll copy this a few times and change some of these values we'll say id2 and 2d 2 and the same for the last one id 3 and to do 3 and we'll just change completed to true just so it's a bit different next we need to add our reducers so the reducer responds to the action it takes the current state and creates new state based on the action payload so the first register that we'll need is the add to do reducer this is just a plain function that takes the state the action as its parameters redux passes in the current state and the action behind the scenes the state is the current state of this slice in this case it's going to be our array of 2d items and the action contains the type and the payload and it comes from our component so anytime we call add to do action from our components this is the reducer that will handle that action since this is the add to do action this is where we want to add logic to update the state with the new to-do since we're adding a new to-do the first thing we want to do is create an object that represents the new to do so the const new 2d is equal to an object so we'll generate an id based on the current date just to make sure that it's unique we'll take the title from the payload which comes from the action so the action.payload.title and we'll just default completed to be false so this new object is going to have the same properties as the other to-do's in our array now all we have to do is push this to the state object so redux has given us the state object as a parameter so we can say state.push to do or need to do rather this will add our new to-do to the end of the array at this point redux will take this new state and update the store this then goes and updates our components that rely on this piece of stitch this is our first reducer but we'll add more registers as we go through the tutorial when we add our producer object like this the create slice function creates actions based on the register names so now all we need to do is get our actions and export them so that our components can dispatch these actions themselves so to do this at the bottom of the file i'm going to take a new line and say export const open some braces and then in here we're going to say add to do equals to do slice dot actions so after we've defined the reducers and our create slice function the create slice function will return a bunch of actions and assign it to the variable that we've chosen up here so all we're doing here is getting the actions out of the actions object the last thing we need to do is do the same for our reducer so the export default to do slice style producer we do this because we need to add it to the store we'll do that now if we jump back into store.js where we configured our store earlier in the tutorial remember we added an empty producer object here so this is where we want to add our own reducers the first thing we'll do is import the 2d reducer from 2d slice like so and down in the reducer property that we pass to the configure store we just want to give this one a name which we'll call to do's and say this is the to-do reducer like so remember to store holds all our reducers and manages them for us so for example we could have another register called user reducer in here and the store will handle combining these registers for us okay so that's our to-do slice setup and our store configured so in two files we've managed to set up a whole redux application so we'll just do a quick recap on this in store.js we've configured our store we've imported our reducer from our slice and just added this reducer to the store we've created our to-do slice this slice is in charge of controlling and updating the to-do state we just specify some default state we've specified our first producer which handles the ad to do action and we've created our first action which is add to do okay so we've created the register and the action to add a to-do this doesn't do anything yet because we haven't dispatched the action what we want to happen is when the user types a value in our application and click submit we want to dispatch the add to do action so in add to do form dot js the first thing we'll do is import the use dispatch hook this lets us dispatch actions and we import this from react redux and down in our add to form function what we want to do is say const dispatch it's going to be go to use dispatch since we want to dispatch the add to do action we have to import that as well so the import open our braces type add to do from dot dot slash redux slash to do slice like so now you enter function that gets called when the form is submitted we'll add a call to dispatch the ad to do action so we'll type dispatch open our braces to call the function and then we'll pass in the ad to the action and we'll open our braces again for each to do we need to know the title so we'll add a new object and pass in the title this object gets mapped to the action payload so in this object we'll type title it's going to be equal to the value that the user has typed into the form like so and then we'll save to now if we try this we type new to do 2 and click submit nothing happens in our ui because we haven't updated the to-do list to pull the data from redux which we'll do in a second but if we open up the redux dev tools and if we click on the action tab you can see our add to do action has been dispatched and the payload has a title and the value that the user has typed in if we click on the state tab and expand our to-do's list you can see our new to-do has been added to the end of the list so every time we add one of these and click on submit you can see the action gets dispatched and the state updates with the new item okay so we'll do a quick recap to make sure we understand what all the parts of redux are doing and how they work together to update this dip so in our add2d form we import the action that we want to dispatch we can import as many actions as we like depending on the different things that are happening we dispatch this action and pass in a payload in this case we pass in the title to the add to do action in our to-do slice we have an ad to do register which receives this action and the current state of the slice we then create the new to do based on the action payload title and add some other properties that we need before we add it to the array which we do by saying state.push at this point redux takes the new state and saves it to the store any components that rely on the state get updated with the new state we'll see how components can retrieve state and be notified of state updates from redux in the next section now that we've looked at dispatching actions and updating state we'll look at how to retrieve data from redux in our 2d list component we want to take the to-do's from redux as opposed to taking them from this dummy list to do this we'll use what's called the use selector hook so we'll start by importing this at the top we'll do import open braces use selector from react redux now in our function we can call this hook by saying const to loose is going to be equal to use selector open and close braces this accepts a function and returns us the data based on that function so we'll pass in our function in this case it'll be an arrow function this accepts the state which is passed in by redux and all we want to do here is say return us state dot to these now this is going to go to the store pick out all the to-do's from state and assign it to the to-do's variable since we've done the hard work already to display the list in our jsx we just need to replace the domain list with whatever we receive from redux so instead of displaying this we can comment it out and now these to-do's will be displayed in our list so if we save this and see if it works you can see in our app over here that we have the three to-do items that are currently in state so if we jump into our to-do slice you can see we have the three items here and if we add a four phone refresh the browser you can see it's appeared so we'll get rid of this again and we'll jump back into our three list we'll delete does come with the code because we don't need it anymore it's always a good idea to clean up our code as we go so the state value that gets passed into our function here is the entire statutory that is stored in redux so if you have multiple slices of state this will return the whole thing this is why we have to specify the to-do's so this lets us do some pretty cool things for example if we wanted to get a specific to do or filter the list we would do it here in this function next we'll look at how to market to do as complete this is interesting since it involves updating existing state whereas up to now we've just been adding tested so in to do slice.js we'll add a new register called toggle complete open up to do slice.js in the registers object we'll add a new reducer toggle complete remember each reducer accepts the current state and the action which gets passed in by redux when our component dispatches the toggle complete action this is the reducer that will handle that action now we have our reducer we just need to implement the logic to update the state remember each to-do in the list has an id our component will pass this id as part of the action payload and we will use this id to determine which to do in the array needs to be updated so in our reducer we'll use the id to find the index of the to-do so say const index is equal to state dot find index and we'll pass on our function which accepts the current td the defined index function is currently on so we'll say to do dot id this equals the action dot payload dot id and then we'll save this so all this is doing is finding the index of the to do an array based on the id so if the id is 1 the index will be 0. if the id is 2 the index will be 1 and so on now we know the index we can update the completed property for the given to do so we'll say state open our braces use the index to get the to do at that position we'll say dot completed so we're going to update the completed property of the given to do it's going to be equal to action dot payload dot completed so whatever value our component passes as part of the payload we're going to set that to a new completed value at this point redux updates the state our selector will detect the change and re-render any components which we'll see in a minute with our reducer in place we need to trigger the action that calls the reducer first we'll export it down here so we'll take a new line and then we'll say toggle complete remember the create slice function automatically creates actions based on our register names since we have a toggle complete reducer that means we have a toggle complete action okay so now when our checkbox is clicked we want to trigger the toggle complete action to do this we'll jump into to do item dot js we'll import the dispatch hook import use dispatch from react redux and we'll assign this to a variable so say cons dispatch it's going equal to use dispatch this will let us dispatch actions next we want to import the action we want to dispatch so we'll say import toggle complete from dot dot slash redux slash to do slice and see it now in our component we will create a function called handle complete click this is just going to be an arrow function that dispatches our action we'll call the dispatch function and pass in the action we want to dispatch in this case it's toggle complete remember our producer needs to know the id of the 2d item we're changing and what the new completed value is so we'll pass this in as our payload object so in the toggle complete function we'll add a new object we'll pass in the id and pass in the completed value which will be the opposite of what the current completed value is so if the current value is true then the new value will be false and vice versa now you just need to add this to your input so if we scroll down to the input tag we'll take a new line we'll say on change it's going to be equal to handle complete click so now if we click on a to-do you can see the to-do gets updated so we have a look at our dev tools you can see any time we click on the input it dispatches the toggle complete action and the payload you can see the id is one and the completed is whatever the completed value is and if we look at our state we can see that our state also updates with the new values as well so this shows that everything's working okay so we'll just do a quick recap on what's happening so we have a checkbox that calls a function this function dispatches the toggle complete action we pass the payload to the action which contains the id and the new completed value and to do slice.js we have a reducer called toggle complete which gets called and handles that action it accepts the current state and the action that was just dispatched it updates the current value for the completed property based on the payload action redux then updates the state in the store and notifies any components that rely on this state and tells them that the state's changed now since our to-do list component and toolless.js relies on this piece of state which it gets from the selector the component updates based on this new state and re-renders the new data this is why the list changes based on an action dispatch next we'll look at another example of using this pattern in our app with the delete to do we'll go into the to-do slice and create a register so we'll call this delete to do which will handle the delete to do action and this is a function which accepts the state and the delete 2d action and this is going to be in our function when our action gets dispatched we'll send the id of the to-do that was clicked and then we'll filter this to do out of the current list in state to do this we use the filter function so we'll say state dot filter and this accepts a function and in here we'll say return all the to-do's that do not equal the id of the payload id so say to-do dot id is not equal to action dot payload so the filter function will give us back all the to-do's that don't equal the id in the payload and then we just need to return this since the filter function will return us a new array next we'll export our action which was created for us remember since we created a delete to do producer the delete to do slice creates a delete to do action for us so we can export to delete to do like so next we'll jump into to-do item dot js and we'll import our action at the top so let's say toggle complete we'll import delete to do and create a function this will be called handle delete click and this is just going to be equal to an arrow function so anytime this leak button is clicked it's going to call this function and from here this is where we want to dispatch our action so we'll say dispatch open our braces and we'll pass in the action that we want to dispatch in this case it's going to be delete to do remember the register needs to know the id of this to the item that was clicked so we'll pass in the id as the payload next we'll jump down into our button and we'll add on click event and this will call our handle delete click now if we go into our app and if we delete some to these you can see they are removed from the list next we'll look at displaying the number of completed items in total complete items.js we'll import use selector hook so let's say import use selector from react redux and we'll assign this to a variable so we'll say const completed to use it's going to be equal to use selector we can pass a function to tell redux what we want to return from state we'll pass in our arrow function which gives us the complete state tree and in here we can use the filter function so say state dot today's dot filter and we'll pass in our function to the filter function and what we want to say is give us back all the completed to do's that have a value of tree remember the state value that gets passed to the selector here is the total stitch tree which is why we need to specify state dot to-do's in here now the result of our function gets passed to the completed to lose variable up here since we use the filter function this is going to be an array so basically what we want to do in our ui is display the length of this array as a number here we'll jump into our jsx and we'll delete this hard-coded value and then we'll just say completed today's dot length like so and now if we save this you can see in the browser that it's showing us one complete item if we start ticking these things you can see it updates so whenever this component mounts it's going to go and get all the completed to do's from state this gives us an array and then we just output the length of this array in our jsx anytime the state gets updated if we add a to do or check it to do the g selector is going to get notified of this change and it causes this to rerun which gives us back the new completed to-do's array to do api calls in redux we need what's called middleware instead of dispatching an action that goes straight to the reducer we dispatch an action that calls a thunk which does the api call this then creates a normal action and sends it on its way to the reducer so it sounds kind of messy but let's run through this video instead of dispatching a plane action our component dispatches an action that calls a thunk this action gets intercepted by the middleware which does the api call once the api call does its thing and we get a response back the middleware takes the data and dispatches a plain old action as we've seen before so the payload here could be whatever was returned from the api from here things going as we're used to a reducer handles the action accepting the current state and the action and return some new state so this flow is the same as what we've learned so far we're just adding an extra step in between which handles the api call this is the logical place to do this as we can't do our api call in our component since it would be difficult to reuse that code and we can't do the api call in the reducer because the reducer is a pure function that creates the new state only okay so now we're going to connect our opt-in api so we can practice working with apis and redux i've included a pre-built api that we'll use for this you can grab the link to check out the code in the description once you have the link open up a terminal and paste it in next we'll do cd react dash redux dash to do dash app slash api and then we'll type npm install which will install our dependencies for us and then we'll do npm run server and if all went well you should see that the server is running on port 7000 to test this we'll open up postman we'll create a new request which will be a get request and we'll say localhost 7000 slash 2ds and hit send and you can see in the response it's given us back a list of a few to do's so we can also create to-do's this will be a post request say book a host 7000 slash to-do's and we'll pass in a body of json and all we have to do is pass in the title api will default the rest of the values for us so say this is my new to-do and if we send this you can see the status is 200 okay which means all went well and the api has given us back the title of the to-do the id and a default completed value of false and it's just given us this in a 2d object and then if we do a get again you can see the to-do has been added to the bottom of the list so it's important to note that if you stop and start the server that any changes you made to the to-do's or any to-do's that you created will be reset this is because this to-do list isn't safe to a database and it's saved in memory on the api let's start by getting the to-do's from the api the first thing we'll do is import the create async dunk function so up here we'll just take a comma and type create async dunk like so and and then we'll create our function so we'll call it get to use async equals creates async thunk so a thunk is a function that returns another function this thunk is the new action which we dispatch from our components this will in turn dispatch its own action when the response completes with the data from the api call as the payload so we need to pass some stuff too to create async thunk function so we'll open our quotes and we'll give it a name we'll call this to-do's get to use async and then we'll do a comma then we'll pass in the function that uses the fetch api to get the data so this is going to be an async function it's going to be an arrow function like so and inside the function we're going to say const response is equal to a width batch and then we're just going to pass in our apa url so it's going to be http colon slash localhost colon 7000 slash to-do's if the response is good we will convert the response to json so we'll say if response dot okay we want to say const to do's is equal to a with resp dot json this takes the response which is going to be a array of to-do's that converts it to json and assigns it to the to-do's variable lastly we'll return an object that contains our today's once the function returns it will dispatch an action whatever we return in this case an object contained in a to the array will be the payload of the action whenever this returns it'll dispatch an action and the to-do's will be in the payload and all this is done behind the scenes okay so now we have our action and our thunk we need to implement the register logic which will handle this action so if we jump into our slice we do this within the extra reducers object this is where we specify additional producers that our to-do slice can use so the syntax is a bit different as our dunk will dispatch a number of actions the action we care about right now is the fulfilled action so we open our square braces and we add the name of our thunk get to use async dot fulfilled when the dunk dispatches a fulfilled action this means the api call and our dunk has completed and dispatched this action successfully so these reducers work the same as the plane reducers that we've used before and it's just a plane function which takes the state and the action now we'll return the to-do is the kim in the payload at which point react will update the state for us so we'll say return action dot payload dot to dos okay so now we have our action and our thunk and we have the reducer that's going to handle the fulfilled action that the thunk dispatches behind the scenes we just need to export our thunk so at the top we'll just do export like so now we have to trigger the action that fetches the to-do the best place to do this is when the to-do list component gets loaded for the first time so if we jump into to-do list we will import use dispatch and we'll assign this so that we can use it so say cons dispatch equals use dispatch so we want to get the to-do's as soon as this to-do list component loads so we'll add the use effect hook which lets us do this so we'll import use effect from react and in our component we'll say use effect we'll pass in the function that we want to call and just after the function we'll pass in our dependency array this is just the list of things that will trigger this use effect function and in here we will say dispatch and pass in the action that we want to dispatch which we need to import from the top so we'll do import get to use async from redux slash to do slice and we'll pass this in here like so and we'll just update our dependency array to include dispatch just to avoid any crazy side effects okay so in our to-do list we have a use effect hook which is going to get called when the component loads for the first time and in this function we're going to dispatch the get to these async action which goes off and matches the to-do's and adds them to it because the state's updated the selector gets notified and our to-do's update causing the component to re-render okay so now if we try this you can see that we have five to-do's if we look at the dev tools you can see that our fulfilled action is being dispatched and you can see the payload has a list of to-do's that have come back from the api if we look at the network tab and if we reload the page just to trigger the request you can see it calls the today api it does a get it returns 200 okay and the preview of the response has all the to these in it remember i mentioned earth thunks dispatch a number of actions behind the scenes you can see here that when the request is in progress it dispatches a pending action this is useful for displaying a loading spinner or plugging some messages and so on just to see this part working if we go back into our to-do slice down in our extra producers we can do some stuff in here based on the pending state so we'll say get to these async.pending and this is also just going to be a plain function that takes the state and the current action but for now i'll do is console.log and say patching data and we'll copy this paste it in our fulfilled one and this message will say uh fetched data successfully and we'll save this now if we look at our dev tools again and open our console and we'll just refresh the page you can see the two messages have appeared based on the different actions so the first one says fetching data whenever the data has returned and the fulfilled action gets dispatched it sends us a fetch data successfully message okay so that's the basic approach to using thunks to fetch data within redux so we'll just do a quick recap now before practicing with the other features so in our to-do slice we create a dunk this gets called by our components our component dispatches to get to these async action that gets created by this thunk this does an api call if the response is good then it takes the data it converts it to json assigns it to the today's variable and then we return this to this object at this point the thunk will dispatch a action that says that the request is completed and the to-do's object will be part of the payload since an action was dispatched it goes down to the reducers it finds the register that will handle that action the producer will take the state and the action and it just returns the to-do's taken from the payload so at this point the state gets updated into the store and all the components that depend on this bit of state so in this case the to-do list gets updated because the selector has been informed by the store that the to-do state has changed because this updates then this variable gets updated which means our jsx re-renders with the new data and the process that triggers all this is when the component loads we dispatch the get to these async action from our use effect hook next we'll look at how to add a to-do in to do slice.js we're going to create a dunk so this is going to be similar to the get to these async we'll call it const add to the async and this is going to be equal to create async dunk so give it a name to use slash add to do async we'll create our async function this time we pass in the payload parameter as we need to know the title of the to-do this payload variable contains whatever was sent to us by the component when it dispatched the action so we'll just finish our arrow function like so and and here we're going to use the fetch api so say const response is equal to a width fetch open our braces and we'll say http colon slash vocal host colon 7000 slash 2ds and we need to pass in a object of some configuration so we're going to say the method for this request is going to be post and we'll add some headers and we'll say the content type it's going to be application slash json lastly we need to send a body so the body is going to contain the title of the tree that the user entered when they filled the form we need to stringify this and then we'll just pass in an object and we'll say title it's going to be payload.title like so now if the response is okay the api will give us back a to-do object with the title the id and a default completed value so if we jump over to postman and if we make a push request here we're just going to pass the title in in the body of our request and if we click send you can see the response comes back with a 2d object which has our title id and a completed value this is what we want to get out of the response and put into state so if we jump back to our code and to do slice js we're going to say if response dot is okay we will get the to-do from the response so we'll say constitute equals a width response dot json and then we'll just return this to do as a new object okay so now we have created our dunk and this will create a bunch of actions for us whenever the requests have finished the add to do async dot fulfilled action will get dispatched and it will have the to-do as part of the payload so now we just need the reducer to handle this action so if we jump down into our extra producers we'll take a new line open our square braces and we'll say add to the async dot fulfilled and this is just going to be an arrow function that takes the current state and the action that was passed into it and all we want to do here is say state dot push action dot payload dot to do so when the action is triggered this register will handle the fulfilled action it's going to take the to-do from the payload and it's going to push it to the current state so then at this point redux will update the store and notify our components that something has changed all we need to do now is wire up our new action to our add to the form so if we jump into add to do form.js instead of importing add to do we're going to import add to do async and we're just going to dispatch it in our on submit function when the button gets clicked over here it's going to dispatch the action with whatever the user is typed in here if we save add to reform.js and jump over to our browser and we'll add a new today so say wash the car and if we hit submit you can see it gets added to the bottom and if we refresh the page it persists because it's been stored on the server the last thing that we're going to do before i set you a challenge is to call the api anytime at to do as marked as completed currently if we complete all these to-do's and then refresh it doesn't persist on the api so everything gets reset the approach that we're going to take for this is similar to what we've done before so we'll jump into 2d slice and we're going to create a new async thunk so we'll say export const toggle complete async and this is going to go to create async and again we'll pass in our name so we'll say to do's slash complete to do async and we'll pass in our async function and we need to accept the payload since the payload will contain whether the to-do is to be marked complete or not complete and this will be an arrow function like so now we'll say const response equals a width fetch and this time we're going to pass in a template string and we'll add our endpoint localhost 7000 slash to do's and because we are updating and existing to do we need to pass in the id of the to-do that we're updating so to do this we open our curly braces with a dollar sign in front and then we'll just take the id from the payload and we need to pass in some config to our fetch request we're going to say the method is a patch because we are updating an existing entity on the api and we'll pass in our header it's going to be content type application slash json and for the body we're going to pass in the completed value which we get from the payload so we've got a fetch request here which is going to update the completed value for a given id so if the response is okay we're going to get back a to-do in the body similar to whenever we added a to-do up here so all we'll do is say const to d is equal to a with response dot json which will get our updated to the object from the response and then we'll return an object and then i'm going to say the id is going to be the to-do dot id and the completed value is going to be to-do dot completed whenever our thunk returns it's going to dispatch an action i'm just going to have this object as part of the payload so now we'll create a reducer if we go down to extra reducers take a new line and we'll say toggle complete async dot fulfilled and this is going to be a function that takes the current state and the action and the logic is going to be similar to what we have up here in our original producer so what we can do is just copy this paste it in like so and all this does is it takes the id from the action payload it finds the index of the to-do that we're updating it uses the index to update the completed value of that tutu at that specific position and then as usual when this function is completed redux will update the state and tell our components about it and finally we just need to jump into the item and instead of toggle complete we want to import toggle complete async and dispatch it from our handle complete click so the handle complete click gets called whenever one of these check boxes is ticked or unticked do you know if you see this if we tick some of these things and you can see it's been persisted okay so just to summarize the working with an api part of this whenever you need to do an api call or something similar create a dunk so this comes from react toolkit and does a lot of magic behind the scenes for us any data that you need to store in state that comes back in the response you return as part of the payload this then gets dispatched as part of an action and then you just go down to your extra reducers create a producer to handle the action then on your component import the async action and dispatch it as usual from an event handler or otherwise okay so a challenge for you to try is to delete a to-do from the list so currently if we delete it then it gets deleted from the ui but if we refresh it doesn't get persisted on the api so the api has support to delete a to-do by its id what you need to do is add a async dunk that handles a delete request so the delete request is going to look something similar to this it's going to use the fetch api it's going to pass in the id which is going to need to get somehow and you need to pass in the method which in this case will be delete create an async function which does this api call and then you're going to want to create a reducer in the actual reducers part that updates the state once your request is fulfilled the logic for that will be similar to what we did for the delete tutu already and then from there you just need to dispatch your action so you're going to have to make a change somewhere in todoitem.js okay so that wraps up for this video if you have a go with the challenge or if you add your own features to this tutorial let me know on twitter or drop me an email because it's always good to see what you come up with if you like this video don't forget to like and subscribe and share this video with your friends thanks for watching and i'll see you in the next one you

Channel: Chris Blakely

Views: 93,520

Keywords: react redux todo app, react redux todo app tutorial, react redux todo app example, build todo app with react js + hooks + redux, todo app using react redux, react native redux todo app, todo list app react redux, todo app in react js redux, build a todo app with react redux projects for beginners (full), react beginner project, react project for beginners, react redux, react redux tutorial

Id: fiesH6WU63I

Length: 59min 57sec (3597 seconds)

Published: Wed Apr 07 2021