Understanding Redux using React.
One of the most confusing concepts one may come across while learning React is Redux. Redux is a very useful concept, especially in state management of React projects. So hands on experience in Redux is a plus point for a developer working with any technology… not just React. This article will help you understand Redux in a simplified approach.
“A Predictable State Container for JS Apps”
That’s what the doc states… difficult to digest for beginners. So let’s uncover this concept bit by bit using an simple example and then by a small application in React.
Before we dive into Redux let’s be sure that you are comfortable with basic terminologies like component, state, hooks and how to design simple class based and functional components… if not please learn basics of React and then revisit this article.
Redux is nothing but a mechanism or an architecture which ensures a single source of data for all components of an application ,and a unidirectional data flow to update the data present in the source.
Let us consider a case of a restaurant. There is one refrigerator for storing food and ingredients. The kitchen receives an order from a table. The kitchen prepares the dish (modifies the items of the refrigerator in the sense ) and dish (modified items of refrigerator) gets served on the table.
Now below are the equivalents in terms of Redux.
Refrigerator is the Store ,which is nothing but a container of immutable global state of entire application. The state in the store is read-only, one can access it (in it’s component in case of React) but cannot modify it directly (Just as in case of restaurant a customer cannot access directly the contents of the refrigerator ).
So how to update the global state ?…Reducer , analogous to the kitchen, does the job updating the state in the global store. When user interacts with the application by clicking a button, opening a page, or provides input to a text field in a form, an Action gets dispatched to the reducer. Each action has own identifier with the help of which the reducer updates the state in the store and the component can access the freshly updated information from the store.
To put it all together, consider an React application with many components, and one global state present in the store. The components are dependent on the store for their information. When an event handler attached to any of the element in a particular component gets triggered, it dispatches an action to the reducer which updates the state as the component wants and the store gets updated. The component (view) gets re-rendered showing updated information from the store. This is nothing but a unidirectional data flow.
Now lets get our hands dirty and see the process using a small React app. The application that we would be working on is nothing but a simple notes app which has two basic functionalities ,add a note and delete all notes to demonstrate how Redux works.
Create a basic React app and open it in your localhost. If everything works fine install Redux using following command :
npm i — save redux react-redux
For the frontend work I have used Material UI — a library to design attractive user interfaces in react apps. So make sure you install Material UI using below command before proceeding further.
npm install @material-ui/core
First lets define our actions and the reducer. Our global state present in the store is a simple array of notes where each note is nothing but a string. We would define this state later in the App.js file.
We are creating two action functions for adding new note and deleting all notes. These actions will get dispatched in a particular React component.
The reducer gets fired upon dispatch of an action. According to the identifier, we return an updated global state to the store. In the above code snippet, when the add note action gets dispatched, the reducer updates the global state by adding a new note to the notes array.
Replace your App.js file with following code. Here we define our store which is used by three separate react components.
Now we define our three child components , all three should be in components directory in the src directory.
First is a component which displays all notes present in the global state. Here we make use of useSelector hook which provides a read-only access to our global state.
Now a component which lets you add a new note. Notice how it dispatches a add note action to the reducer using useDispatch hook.
Finally, a our third component which displays number of notes in the current global state and allows us to delete all notes.
Now run this application on localhost. you can initially see a single note which which initialized our global state. Go on adding notes. Notice how each of the action fires up the reducer, which changes the global state, and the respective components re-render due to change in state.
You can access the code using this repository link in case of errors
Managing one global state for single application is the backbone idea of Redux. This may seem absurd for such a small application but this idea is very useful for large react projects in which having a local state for each of the components can lead to unwanted complexities and issues.
Hope you understood this concept… Happy Learning :)
