This article is focused on how I created a React Counter Application using useReducer Hook, it focuses on the hows, implementation, and difficulties encountered when creating it.

The Why?

You might be wondering why you need this or why you should be bothered about this article, like I mentioned, this article is focused on how I implemented the functionality of the application. Someone you know might also be having difficulties implementing one or two features that will be mentioned in this article and it(this article) will come in handy. Alright, let's get right into it

Overview

The application involves some important features and implementation that a beginner might struggle with. Features and Implementation like:

• Using an input field to set the counter to any starting value.

• Adding buttons that can automatically increase/decreased the counter by a value more than 1 when clicked.

• implementing an Error Page and Error Boundary Page

• Using a friendly UI with a beautiful hover effect

• Routing of pages

if you think this article will be too long a read, kindly check the live demo and the GitHub link below.

The Live Demo is hosted on Netlify --- https://countdapp.netlify.app/

The GitHub code ---https://github.com/was-coder/react-counter

Let's start by breaking down how the features/implementation were arrived at.

The Features/Implementation

1. The Increment, Decrement, Reset and Set Count

Step 1: The increasing, decreasing, and setting of the count was achieved using the useReducer Hook. The useReducer is a hook that takes a state and its dispatch as its value with a function called reducer which I created on another page and an initialValue called count which was set to 0.

Step 2: I created the reducer function which takes the argument of state and its action using an inner switch case( a useReducer uses switch case to handle each cases) telling us the type of button(cases) we wanted to handle. The increment and decrement count was handled by adding and subtracting 1 respectively to their state.count. The reset was set to its initialValue which is 0 while extraIncrement and extraDecrement were set to their corresponding values of array. The set value was giving issues when clicked without inputing a value by showing Count:NaN, but i was able to solved that by putting a conditional statement to check the input field value as shown below

3. Error Page and Error Boundary

This involves a user routing to a path that is not among the routed paths in the application. it helps in catching this(incorrect routes) error and it is usually a 404 erro. How it was achieved:

Step 1: Its routed path is an asterick(*) path as shown below:

Step 2: The next is to create the error page component code. You can be dynamic with your styling to look however you want it to look

From the Live Demo link given in the overview content, you can route to any invalid link and see how it looks like.

This will be all for creating a react counter application, you can check the github link in the overview content to view the HTML codes and also some other implementation like the Error Boundary, Routing and the UI. I hope you enjoy this article, if you do kindly connect with me on Twitter, Linkedin, Github and Hashnode for more tech content.