Hands-on Lab - React Redux
Estimated Time Needed: 40 mins
In this lab, you will be building an increment counter using Redux.
Objective:
After completing this lab, you will be able to use state management to increment the counter using Redux. Redux library has all
that it requires for store management while react-redux binds react and redux libraries together.
The store management with redux has 3 main components:
Actions - are blocks of information that send data from your application to your store. Actions must have a type property that
indicates the type of action being performed.
Reducers -Reducers specify how the application’s state changes in response to actions sent to the store.
Store -The Store is the object that brings the action and reducer together. The store has the following responsibilities: Holds
application state; Allows access to state; Allows state to be updated via dispatch(action);
Set-up:Clone the repository
1. Go to the git repository [Link] that contains the starter
code needed for this lab and clone the repository.
2. In the lab environment, open a terminal window by choosing Terminal > New Terminal from the menu.
3. Change to your project folder, if you are not in the project folder already.
1. 1
1. cd /home/project
Copied!
{: codeblock}
4. Clone the Git repository, if it doesn’t already exist.
1. 1
1. [ ! -d 'uqwxd-react_labs' ] && git clone [Link]
Copied!
{: codeblock}
5. Change to the directory uqwxd-react_todolist to start working on the lab.
1. 1
1. cd uqwxd-react_labs/react-redux-master
Copied!
{: codeblock}
6. List the contents of this directory to see the artifacts for this lab.
1. 1
1. ls
Copied!
Creating the increment counter application using Redux in
React
1. Install the redux and react-redux libraries for your application using the below command. Once installed, verify if the
required packages are installed in the [Link] file.
1. 1
1. npm install redux react-redux
Copied!
2. In this application that we are building to learn the use of redux with react, we will have one MainPanel component which
contains two internal Components, MyButton and DivPanel.
3. MyButton is a button component which maintains a counter onClick. The value of this counter will be displayed in
DivPanel. The content of DivPanel will be automatically refreshed everytime the counter value changes.
4. Under the src folder, create a folder named action to define the actions for our application. The only action you are going
to perform is incrementing of the counter. In the action folder, create [Link] and paste the following code given below.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
1. const increment = (val) => {
2. return {
3. type : 'INCREMENT',
4. inc : val
5. }
6. }
7.
8. export default increment;
Copied!
val is the value you want to increase the counter by everytime the button is clicked. Now that you have your action which
defines what is to be done, you will create the reducers which will define how it is done.
5. Under the src folder, create a folder named reducers. In the reducers folder create [Link] and paste the code given
below.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
1. import {combineReducers} from 'redux'
2.
3. const counter = (state=0,action)=>{
4. if([Link] === 'INCREMENT') {
5. //This will increase the value of counter by the value passed to the increment method
6. return state+[Link];
7. }
8. //Returns the current value of the counter
9. return state;
10. }
11.
12. const myReducers = combineReducers({counter});
13.
14. export default myReducers;
Copied!
6. Now you have your action and reducers. What is left to be created is the store. Before you create the store you will create
the components. Create a folder for the components named components inside the src folder. Create [Link] file
inside the component folder and paste the code given below.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
1. import React from 'react'
2. import { useDispatch} from 'react-redux';
3. import increment from '../action'
4.
5. const MyButton = ()=>{
6. let dispatch = useDispatch();
7. return (
8. <button onClick={()=>dispatch(increment(1))}>Increase counter</button>
9. );
10. }
11.
12. export default MyButton;
13.
Copied!
useDispatch dispatches the event to the store and finds out what action is to be taken and uses the appropriate reducer to do
the same.
7. You will now create the [Link] file inside the components folder which will contain DivPanel where you will display
the counter value.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
1. import React from 'react'
2. import { useSelector } from 'react-redux';
3.
4. const DivPanel = () =>{
5. let counterVal = useSelector(state => [Link])
6. return (
7. <div>
8. The present value of counter is {counterVal}
9. </div>
10. );
11. }
12.
13. export default DivPanel;
14.
Copied!
useSelector is used to select the state from the store whose value you want to access.
8. Now we will create the [Link] with the two components in the file [Link].
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
1. import React from 'react'
2. import MyButton from './MyButton'
3. import DivPanel from './DivPanel';
4.
5. const MainPanel = ()=>{
6. return (
7. <div>
8. This is main panel <MyButton></MyButton>
9. <DivPanel></DivPanel>
10. </div>
11. );
12. }
13. export default MainPanel;
Copied!
9. You have all the panels created. Now let’s render the MainPanel through [Link]. [Link] contains the code give below.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
1. import React from 'react';
2. import MainPanel from './components/MainPanel';
3.
4. function App() {
5. return (
6. <div>
7. <MainPanel/>
8. </div>
9. );
10. }
11.
12. export default App;
13.
Copied!
10. Now for the final set up of the react application. You need to create and set up the store, where you can manage all the
states (in this application, the counter) you want. This is done in [Link].
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
1. import React from 'react';
2. import ReactDOM from 'react-dom';
3. import App from './App';
4.
5.
6. import {legacy_createStore as createStore} from 'redux';;
7. import {Provider} from 'react-redux'
8. import myReducers from './reducers'
9.
10.
11. //Create the store
12. const myStore = createStore(myReducers);
13.
14. //This will console log the current state everytime the state changes
15. [Link](()=>[Link]([Link]()));
16.
17. //Enveloping the App inside the Provider, ensures that the states in the store are available
18. //throughout the application
19. [Link](<Provider store={myStore}><App/></Provider>, [Link]('root'));
Copied!
11. In the terminal, ensure you are in the react-redux directory and run the following command to start the server and run
the application.
1. 1
1. npm start
Copied!
You will see this output indicating that the server is running.
12. To verify that the server is running, click on the Skills Network button on the left to open the Skills Network Toolbox. Then
click Other. Choose Launch Application and enter the port number 3000 on which the server is running and click the
launch icon.
The increment counter application using Redux will appear on the browser as seen in the image [Link] the application by
incrementing the counter.
13. To stop the server, go to the terminal in the lab environment and press Ctrl+c to stop the server.
Congratulations! You have completed the lab for creating increment counter Application using Redux
in React.
Summary
In this lab, you have used Redux in React to build an increment counter application that allows you to increase the counter
each time the increase counter button is clicked.
Author(s)
Sapthashree K S
Changelog
Date Version Changed by Change Description
2022-10-31 1.0 Sapthashree K S Initial version created based videos
