This aim of this lab is to understand the working of redux
. As we know that, there are three major concepts of redux, which take in part in order understand redux. The following are the three conceps:
- Actions - plain JavaScript object that contains information.
- Reducers - pure functions that contain the logic and calculation that needed to be performed on the state.
- Store - an object which provides the state of the application.
Through this lab, we will try to apply all the above concepts, in order to build a very simple application.
NOTE: You may not find a great use of using redux, for this simple application, but for complex applications --> where the application is build with many components and these components share some states, in such cases redux becomes really powerful. But in order to understand and practice redux, we will go with a simple example.
use the following command in order to install redux: npm install redux
We need to build a Like functionality
. -> which means, you need to create two buttons, which can like and unlike.
If someone clicks on the like button, the like counter
should increment by one, and if someone click on the unlike button, the like counter
should decrease by one, like shown below:
- create a new project and name it as ->
redux-like-counter
- Create three files:
Actions.jsx
-> which will contain all your actions.Reducer.jsx
-> which will contain all your reducers.LikeCounter.jsx
-> which will contain the store. You have to write thejsx
for the application in this component. ( yourapp.jsx
should renderLikeCounter
only.)
Inside Actions.jsx
-> create two functions -:
- incrementLike() -> this function should return an object which contains the
INCREMENT
as the type of action. - decrementLike() -> this function should return an object which contains the
DECREMENT
as the type of action.
Inside Reducer.jsx
: create one function as reducer
, which takes two arguments:
- state
- action
Based on the type of action (in our case there are only two types of actions ->
INCREMENT
andDECREMENT
), write the logic for that particular action.
Inside LikeCounter.jsx
-> create a store, and pass reducer
(the same reducer which you created in the previous progression) as an argument to it.
Use dispatch
to dispatch the action to the store.
Happy Coding ❤️!