HOW TO USE REDUX THUNK - SAVE AND LOAD DATA FROM THE BACKEND

good morning let's think about thanks and talk about them and actually write a simple problem that we'll use thunks with Redux let's say we have a simple note-taking app you can add new notes new note add it add some other node and another note but every time you reload the page all the notes will be lost so let's save them on the back end using redux tank let's look at the code here is the app we have a new note input which is an input field and a button when you click the button it calls the add note property function with a note text and clears the input that's the note value to an empty string the add note prop in our case dispatches an action add note with the note value this dispatched action gets to our notes reducer it is this add note case and in our add note case we process it we take the previous value of the state and update the note by creating a new array with the previous contents of the notes array and the new note value from the action payload now let's go back to our app add another horizontal line and below it let's add two buttons save and load and these buttons should trigger thunk actions that will post the data to our back-end or get it from it on save click we want to trigger on save function Const on save equals the function where we dispatch save notes and unload we trigger on load event we define the onload function that dispatches Lord nodes now we need to create the thunk action creators before we can do this we need to install Redux tank yarn add Redux tank after it's done go to nodes reducer and create a new thunk Const save notes equals a function thus returns a function this part will be postponed it will be executed when the function will be dispatched and this inner function accepts the method dispatch and get state so in a way thugs are just like regular action creators but instead of creating an object that will be used to calculate the new value of your state they create a function in which you can access your state access your store data and dispatch new actions so in our case we want to get the notes list Const notes equals get state note and then we need to save them on the back end so the call fetch HTTP localhost for a thousand nodes and then we need to pass the options method post headers is an object except application JSON content type application JSON and body is the json stringify nodes let's make this function a synchronous so that we can use a weight and after we've posted our nodes let's alert success expert the save nodes tank now let's enable thunks in our project let's go to storage GS import funk from redux funk import apply middleware from redux and after our nodes reducer + apply middleware thang go back to up the GS and import save nodes from noise reducer now let's write the load node stank back in noise reducer let's create another function log nodes here we don't need to pass the options we can remove this object so it will be a get request we don't need to get the notes from the state and instead of dispatching success we will store the result of this code into the notes constant and then we will dispatch a new action and we'll need to create another action for it the action will be set note it will allow us to override the existing notes we also need to parse the fetch notes as a JSON so we call them response response JSON let's go to actions create a new constant set notes equal set notes copy the action creator create a new one set notes at the type is set notes actually let's use their constant set notes and here let's also change it to the constant and note the set notes action creator accepts the list of notes and the payload will be notes go back to the app and import the Lord notes as well now let's write the set noise reducer case set note equals return state and we set notes to be action payload let's go to the browser try to create a bunch of notes add note add note and some other node may be some number note save it without success okay now reload the page we have no notes here what and here we go we got the whole list recovered thank you for watching this video if you want to pick the topics of the next videos then join my discrete server and vote there on the video ideas Channel have a good day and see you next time

Channel: Maksim Ivanov

Views: 29,265

Rating: 4.78618 out of 5

Keywords: redux, redux thunk, react redux tutorial, redux thunk middleware example, redux thunk example reactjs, redux tutorial, react redux, satansdeer, redux post api call, redux thunk get request

Id: lmyKHYmgUYc

Length: 6min 37sec (397 seconds)

Published: Wed Jun 10 2020