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