How to build a counter app with useReducer Hook

In this post, we will learn how to create a simple counter component that can INCREMENT DECREMENT RESET and SET-VALUE using the React useReducer hook.

Getting Started

Step 1: Build React App
Step 2: Make Counter Component File
Step 3: Build Counter with useReducer Hook
Step 4: Run React Application

Build React App

The first thing we need to do is to create our react app

Create a folder in the directory you want to create the react app
Right-click and select open with visual studio code
On the top of our visual studio code click on terminal and select new terminal

Then run npm create-react-app (name of your app), wait till it installs finish

 npm create-react-app (name of your app)
 //npm create-react-app counter

Navigate into the project root by running cd (name of directory)
```
 cd counter
```

Make Counter Component file

In your project structure, you have /public and /src directories, along with the regular node_modules, .gitignore, README.md, and package.json.

In /public, our important file is index.html, which is very similar to the static index.html the file we made in the first method - just a root div. The /src directory will contain all our React code.

You can delete all the files out of the /src directory, and we'll create our own boilerplate. We'll just keep index.css and index.js.

Then create a new file named Counter.jsx where our counter app will run

Build Counter with useReducer Hook

In this app we will be able to Increment, Decrement , Reset and set value in our counter, copy this code below

import React, {useReducer} from 'react'
import './Home.css'

const ACTIONS = {
  INCREMENT: 'increment',
  DECREMENT: 'decrement',
  RESET: 'reset',
  SET_VALUE: 'set'
}

function reducer(state, action){
  switch(action.type) {
    case ACTIONS.INCREMENT:
      return { count : state.count + 1}
    case ACTIONS.DECREMENT:
      return { count: state.count - 1}
    case ACTIONS.RESET:
      return { count: 0}
    case ACTIONS.SET_VALUE:
        return { count: Number(action.payload) }
    default:
      return state
  }
}
const Home = () => {
  const [state, dispatch] = useReducer(reducer, {count: 0})

  function increment() {
    dispatch({ type: ACTIONS.INCREMENT})
  }

  function decrement() {
    dispatch({ type: ACTIONS.DECREMENT})
  }

  function reset(){
    dispatch({ type: ACTIONS.RESET})
  }

  function set(e){
    dispatch({type: ACTIONS.SET_VALUE, payload: e.target.value})
  }

  return (
    <div className='home'>
      <div className='home__app'>
        <h1>Passenger Counter</h1>
        <span>{state.count}</span>
        <div className='buttons'>
          <button classname='sub' onClick={decrement}>-</button>

          <button classname='add' onClick={increment}>+</button>
          <button classname='res' onClick={reset}>Reset</button>
          <form>
            <input type='text' placeholder='Input Manually' 
              value={state.count} 
              onChange = {set}
             />

          </form>
        </div>
      </div>
    </div>
  )
}

export default Home

Run React Application

To run the react application on your browser you need to evoke the following command from the terminal.

npm start

Conclusion

You can check the live site for a demo https://passenger-counter-tau.vercel.app/

The link to the github repohttps://github.com/Timmydee/Passenger_Counter

Happy Reading!!!

I'd love to connect with you via Twitter | LinkedIn | GitHub |