Hey new bees and techs, here I’m going through with the React and Redux data workflow. You may know or maybe a little confused with Redux and its workflow, so please go through the blog and comment for any queries or for any suggestions. Suggestions are really appreciated and welcome always. Let’s go...
When I started to learn React, Redux was recommended for state management (Is redux only state management for React? The answer is “No”). At that time, I don’t even know what state management is and even what Redux is. Slowly dived into it and my colleague(lead) make me understand how action, reducer and store work behind. Now I’m here to help you understand the way I understood Redux workflow:-)
What are React and Redux?
I better know, it is literally a boring question for all who are in the field of React and Redux world.
The crispy answer is, React is the framework for UI development and Redux is the state, state is nothing but the container of data storage to the actions and reactions of the React application by the user.
Another curious question is, How does dataflow or a workflow between React and Redux will be?
Being a state Redux workflow that is invisible, it sucks our energy about thinking about how it is working behind the screen.
Wherever you search for the workflow of Redux, the most common image will this,
Yes absolutely, I can read your inner voice. Don’t look at me with levity for getting a common image again.
The reason I posted this image is the basic and easy way of understanding how the Redux data flow is the above image reference.
When an end-user clicks a button or an arrow or perform any action in the react application in the browser, then it will capture the action and the action will send the data to Reducer which will store the data and send us the desired output via this.props which means the result of the action to the application user.
I know most of us (including me ;-)) won’t do much reading when we go with blogs or any theoretical reference. We need images or any video’s to understand much easier and in a quicker way.
Here is a flowchart on the data flow of redux. For example, I have chosen an Edit option, when we update a value in the browser react application, what is running on the backend within the appropriate time of Edit and Submit action performed by the user,
Here in the above image,
- Edit is the button for updating a component.
- handleEdit() is the function in the backend to start the process when the Edit button is clicked.
- Once the content needs to be edited is done. For example, the card number is updated, it will pass the value through the Action in the Redux.
- Then the edited value will be gathered through the index value and processed by Reducer and Store the value.
- Once the user clicks the Submit button to update the form, based on Success and Error it will show the alert and save the updated value in the store in Redux.
I believe it is efficacious and clear for you about the data flow in React and Redux. Thanks for reading and glad to get your eye on my blog :-)
