This article aims to illustrate and help you understand how the whole request response flow is like , with the addition of understanding how remote and local state ties into this process.
Our Remote source also known as the database is our Golden Source of Data. One thing to note is that our local state , be it redux or context etc , will always be chasing to be up to date with our remote source. In the diagram above we will see what it actually means.
In the example of a toggle button , on the UI , the user clicks on the toggle button , intending to change the "No" to a "Yes". With that click, an API request is sent to the server and a check is done if everything is in order in the request (e.g are the right parameters provided).
If its a success , the server then proceeds to update the database with the value , changing that specific column from a "No" to a "Yes". It's important to note that at this point our Remote State and local state are not in sync.
With the success and change in the remote state value , our API replies with a success response, it replies with the value that has been changed , a "Yes". This value is then passed down to update our local state.
On changing our local state, the page reading the data from the local state will now see the changes and reflect the changes accordingly in the UI , in this case changing the toggle button from a "No" to a "Yes".
But in the event that the request fails, the API will reply with an error response, usually accompanied by the error message. And it is up to us how we will use that error message returned to handle the error. In this case the local state is not updated as there is no change in the remote state. Ultimately no change in the UI as well , except for a error message displayed.
As much as this maybe a generally easy concept to some and also only taking a split second in the UI to happen , so much goes on in that split second. And it is important that we are keeping track of the process each step of the way.
For a TLDR:
Remote source is always the golden source of information , your local state should always be trying to catch up with the remote state. And any changes made should always be reflected on the remote state first , followed up a success response to update the local state , and with the update in the local state it will update the UI.
Hope this article proves to be of help to anyone reading this. Please do drop me your feedback on my writing or even drop a message to connect!
Top comments (0)