Form Refactoring with useReducer React Hook (mini guide)

Alejo Garcia — Tue, 14 Dec 2021 00:04:49 +0000

In this article, you are going to see a practical approach on how you can implement useReducer, and it also introduces the idea of reducer, so it's beginner-friendly!

So we have this form

import {
  FormControl,
  FormLabel,
  FormHelperText,
  Input,
    Button
} from "@chakra-ui/react";
const Form = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <FormControl id="form" p={50}>
      <FormLabel>First and last name</FormLabel>
      <Input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <FormLabel>Email address</FormLabel>
      <Input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <FormHelperText>We'll never share your email.</FormHelperText>
      <FormLabel>Password</FormLabel>
      <Input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
            <Button mt={4} colorScheme="teal" type="submit">
        Login
      </Button>
    </FormControl>
  );
};
export default Form;

We are using Chakra UI, a React library, and in case you don't know how to install it, go here.

So the first thing we want to do is to create our initialState.

This will be an object containing our 3 states: name, email and password.

const initialState = {
  name : '',
  email : '',
  password : ''
}

const Form = () => {
...
}

Now import the useReducer hook

import { useState, useReducer } from "react";

So here comes the new part for you if you are just learning the concept of reducer.

We are going to create a separate file called reducer.js where it will have a function that handles our state.

// reducer.js

function reducer (state, action) {

}

As you can see we take two parameters:

state this will be the state we receive from the dispatch method that was executed in our case from App.js
action someone calls it the actionObject because when dispatched it looks like this:

const action = {
    type: 'FETCH'
        data : "Alejo"
  };

Continuing with the reducer function, now lets build our switch cases

 function reducer (state, action) {
  switch(action.type){
    case "UPDATE" :
      return {
        ...state,
        [action.key] : action.value
      }
         default:
        return state
  }
}

So what's going on here?

The switch statement, which will be in charge of aligning the action.type to the changes the reducer is going to implement. In other words, the switch will determine those changes like modifying the state BASED on the value of the action.type

Are you getting it now?

The spread operator is ...state and what it does is basically copying the entire state, in order to only modify only the [action.key] : action.value

Having explained the above, now let's add the reducer function into the App.js component

import reducer from "./reducer"
import { useState, useReducer } from "react";

const initialState = {
  name: "",
  email: "",
  password: ""
};

const Form = () => {
// const [name, setName] = useState("");
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");

const [reducerState, dispatch] = useReducer(reducer, initialState);

...
}

Following that we are going to change value of our input from the useState, to the initialState and change the onChange setting state functions to the reducer ones using dispatch.

<Input
        type="text"
        value={reducerState.name}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "name"
          })
        }
      />

        <Input
        type="email"
        value={reducerState.email}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "email"
          })
        }
      />

    <Input
        type="password"
        value={reducerState.password}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "password"
          })
        }
      />

Final step

Let's create a console.log inside a submit() function, so we get to see the complete state from the reducer, and confirm that we have refactored the form successfully:

const Form = () => {

  function submit() {
    console.log({
      name: reducerState.name,
      email: reducerState.email,
      password: reducerState.password
    });
  }
  return (
          ...
      <Button onClick={() => submit()} mt={4} colorScheme="teal" type="submit">
        Login
      </Button>
  );
};
export default Form;

OUTPUT:

{name: 'asadsasd', email: 'adsda@gmail.com', password: 'sadadada'}

Success! Now you have a React form working with useReducer

Complete refactored form code:

Couldn't post a Github repo, but you can check its CodeSandbox.

// App.js
import {
  FormControl,
  FormLabel,
  FormHelperText,
  Input,
  Button
} from "@chakra-ui/react";
import reducer from "./reducer";
import { useState, useReducer } from "react";
const initialState = {
  name: "",
  email: "",
  password: ""
};

const Form = () => {
  const [reducerState, dispatch] = useReducer(reducer, initialState);

  function submit() {
    console.log({
      name: reducerState.name,
      email: reducerState.email,
      password: reducerState.password
    });
  }
  return (
    <FormControl id="form" p={50}>
      <FormLabel>First and last name</FormLabel>
      <Input
        type="text"
        value={reducerState.name}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "name"
          })
        }
      />
      <FormLabel>Email address</FormLabel>
      <Input
        type="email"
        value={reducerState.email}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "email"
          })
        }
      />
      <FormHelperText>We'll never share your email.</FormHelperText>
      <FormLabel>Password</FormLabel>
      <Input
        type="password"
        value={reducerState.password}
        onChange={(e) =>
          dispatch({
            type: "UPDATE",
            value: e.target.value,
            key: "password"
          })
        }
      />
      <Button onClick={() => submit()} mt={4} colorScheme="teal" type="submit">
        Login
      </Button>
    </FormControl>
  );
};
export default Form;

// reducer.js

function reducer (state, action) {
  switch(action.type){
    case "UPDATE" :
      return {
        ...state,
        [action.key] : action.value
      }
      default:
        return state
  }
}
export default reducer

This article was published originally in React Shark's blog:

https://www.reactshark.com/blog/form-refactor-with-usereducer

How to install GA in React (Easiest way in 2021)

Alejo Garcia — Wed, 03 Nov 2021 22:33:29 +0000

Introduction

I'm very excited to be writing this article, such as it is coming from one of my favorite topics, which apart from being React, is Search Engine Optimization.

Google Analytics is the key step for any SEO process.

It is used to track conversions, look at demographics, and events.

It also helps keep track of how your traffic is behaving.

The idea behind GA is to have a solid understanding of not only knowing how many visitors do you have, but also why they are on your website, and what are they doing there.

Having said that I'm going to show you the EASIEST way, for you to install GA in a React app and start tracking visitors accordingly.

A little caution with this method is that you may not want to use this for the long run or use it for big web apps.

Ideally, this article is for those who just want to have GA in their React app, and don't want to spend more than 5 minutes in the process.

How to install Google Analytics in React.js (Easiest way)

First step: Get your Global site tag (gtag.js)

Go to your Google Analytics account

And search for Data Streams, and click on it

Click on your data stream

A copy your gtag.js

Second step: Paste the g.tag.js inside index.html (located in the public folder)

Do you know the public folder when you do npx create-react-app?

Well, what we are going to do is to paste the exact script that Google Analytics gives us, and paste it in our index.html inside our public folder.

Inside index.html we are going to paste the exact g.tag code at that GA gave to us:

<html>
<body>
   ...
 </body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-****"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA-CODE');
</script>
</html>

So in some sense, we are not going to be working with JSX, and you can even say without React.

The issue with this method

This technique will allow you to install GA in a really simple and bugless manner.

It is dead simple, and for landing pages made with React, I think it works great.

But for a blog like this one or even a full web app you might need to go the react-ga route.

DEV Community: Alejo Garcia