Use reducer hook for management states

In react you can use useState hook of save data, but is very complexity if you have many state in one component, an alternative is reducer, its hook is reducer your states use object , dispath and events .

lets see a example bad code with many states:

1import { FunctionComponent, useState } from "react";
2
3const Form: FunctionComponent = () => {
4  const [email, setEmail] = useState("");
5  const [name, setName] = useState("");
6  const [password, setPassword] = useState("");
7
8  return (
9    <div>
10      <input
11        type="text"
12        value={name}
13        placeholder="Name"
14        required
15        onChange={({ target }) => {
16          setName(target.value);
17        }}
18      />
19
20      <input
21        type="email"
22        required
23        value={email}
24        placeholder="Email"
25        onChange={({ target }) => {
26          setEmail(target.value);
27        }}
28      />
29      <input
30        required
31        type="password"
32        placeholder="password"
33        value={password}
34        onChange={({ target }) => {
35          setPassword(target.value);
36        }}
37      />
38    </div>
39  );
40};
41
42export default Form;

This is examples is very simple but in think that is a big form in many inputs, for each input your create one state… yes, this is not good.

useReducer

hook useReducer work similar useState , but in one funcion you can put many values without collateral effect and for update on value you use event handlers.. basically you send an event in you reducer and it`s find a method with same event and its executed

Let’s refactor Form component for use reducer, first we have created other function outside in Form

something like:

1function reducer() {
2  throw Error("Unknown action.");
3}

I’ll use Typescript for showing, then we need create type for parms of reducer

1function reducer() {
1enum actionNames {
2  EMAIL = "EMAIL",
3  NAME = "NAME",
4  PASSWORD = "PASSWORD",
5}
6
7type actionType = {
8  type: actionNames;
9  nextValue: string;
10};
11
12type formType = {
13  name: string;
14  email: string;
15  password: string;
16};
17
18function reducer(state: formType, action: actionType) {
19  throw Error("Unknown action.");
20}

I created three enums EMAIL , NAME and PASSWORD and a assign value that we will a use as event, and actionType I created two types the first is type of event and a assign with enum actionNames and the below line have nextValue is a string but all inputs is some type, We’ll passed types in function own reducer .

basically, We will verify if type is equal of one enum, exemple if type is equal EmaiL will return old state and change email with new value that is action param make that with each action

1enum actionNames {
2  EMAIL = "EMAIL",
3  NAME = "NAME",
4  PASSWORD = "PASSWORD",
5}
6
6type actionType = {
7  type: actionNames;
8  nextValue: string;
9};
10
11type formType = {
12  name: string;
13  email: string;
14  password: string;
15};
16
17function reducer(state: formType, action: actionType) {
19  throw Error("Unknown action.");
18  const { type, nextValue } = action;
19  switch (type) {
20    case actionNames.EMAIL: {
21      return {
22        ...state,
23        email: nextValue,
24      };
25    }
26    case actionNames.PASSWORD: {
27      return {
28        ...state,
29        password: nextValue,
30      };
31    }
32
33    case actionNames.NAME: {
34      return {
35        ...state,
36        name: nextValue,
37      };
38    }
39  }
40
41  Error("Unknown action: " + action.type);
42}

Now we going use this function with reducer hook, lets go remove all useSate and call useReducer hook and frist param its receive an reducer function that we just created, second param receive a initial values

1const [state, dispatch] = useReducer(reducer, {
2  email: "",
3  password: "",
4  name: "",
5});

lets created handleclick function for update values in reducer

1function handleClick(nextValue: string, type: actionNames) {
2  dispatch({ type, nextValue });
3}

this function use a dispatch to useReducer in dispatch receive a object with type

event and new value, let updates inputs for sported reducer

1<div>
2  <input
3    type="text"
4    value={state.name}
5    placeholder="Name"
6    required
7    onChange={({ target }) => {
8      handleClick(target.value, actionNames.NAME);
9    }}
10  />
11
12  <input
13    type="email"
14    required
15    value={state.email}
16    placeholder="Email"
17    onChange={({ target }) => {
18      handleClick(target.value, actionNames.EMAIL);
19    }}
20  />
21  <input
22    required
23    type="password"
24    placeholder="password"
25    value={state.password}
26    onChange={({ target }) => {
27      handleClick(target.value, actionNames.PASSWORD);
28    }}
29  />
30</div>

for each input value use a object for access current value.