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 package.json file.

1. 1

1. npm install redux react-redux --no-audit

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 index.js 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 index.js 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(action.type === 'INCREMENT') {
5. //This will increase the value of counter by the value passed to the increment method
6. return state+action.inc;
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 MyButton.js 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 DivPanel.js 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 => state.counter)
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 MainPanel.js with the two components in the file MainPanel.js.

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 App.js. App.js 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 index.js.

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

1. import React from 'react';
2. import ReactDOM from 'react-dom';
3. import App from './App';
4. import {Provider} from 'react-redux'
5. import myReducers from './reducers'
6. import {legacy_createStore as createStore} from 'redux';;
7.  
8. //Create the store
9. const myStore = createStore(myReducers);
10.  
11. //This will console log the current state everytime the state changes
12. myStore.subscribe(()=>console.log(myStore.getState()));
13.  
14. //Enveloping the App inside the Provider, ensures that the states in the store are available
15. //throughout the application
16. ReactDOM.render(<Provider store={myStore}><App/></Provider>, document.getElementById('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!Executed!

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 below.Check 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.