Хук useReducer в react

Хук useReducer в react

Что такое хук useReducer в react ?

Хук useReducer - это хук react, который позволяет вам управлять состояниями компонентов в приложении react. Это альтернатива хуку useState.

Когда я должен использовать хук useReducer в react ?

Хук useReducer можно использовать вместо хука useState, когда есть два или более состояний, которые изменяются вместе и связаны друг с другом Некоторые примеры и случаи использования :

Вместо того чтобы создавать множество различных хуков useState, хук useReducer можно использовать для обработки всех различных состояний одновременно. Это улучшает читаемость кода

Сделайте запрос на получение данных с помощью хука useReducer.

Давайте создадим api запрос для получения списка пользователей из базы данных. Мы знаем, что нам нужно управлять более чем одним состоянием, которое связано с выполнением нашего api запроса. Поэтому вместо того, чтобы создавать множество хуков useState.

Давайте воспользуемся хуком useReducer, чтобы лучше организовать различные состояния и улучшить читаемость кода.

Добавьте исходные состояния в объект и создайте функцию reducer Function

export const INITIAL_USERS_STATE =  {
 pending: false,
 error: false,
 users: []
}

export const usersReducer = (state, action) =>{
switch (action.type) {
    case "FETCH_POST_PENDING":
     return {
      ...INITIAL_USERS_STATE,
      pending: true,
      error: false,
      users: []
     }
    case "FETCH_POST_FUFILLED":
      return {
        ...INITIAL_USERS_STATE,
        pending: false,
        error: false,
        users: [...action.payload]
        }
    case "FETCH_POST_REJECTED" :
      return {
        ...INITIAL_USERS_STATE,
        pending: false,
        error: {message: `This error occored ➡️ ${action.payload}`},
        users: null
      }
    default:
        return state;
  }
}

//Export both the object and function.

Код показывает, что мы создали начальное состояние для api запроса. Начальное состояние содержит все состояния, которые мы обычно имеем при создании нескольких крючков useState

Мы создали функцию userReducer, которая обновляет состояния в зависимости от типа действия, которое мы передаем или отправляем ей. Если тип действия FETCH_POST_PENDING , то мы распространяем начальное состояние и обновляем каждое состояние соответственно. Этот же процесс применяется к FETCH_POST_FUFILLED и FETCH_POST_REJECTED.

Импортируйте объект и функцию

Мы импортируем объект и функцию из папки hooks и хуки useReducer и useEffect из react. У нас также есть axios для выполнения запросов.

import { INITIAL_USERS_STATE, usersReducer } from "./Hooks/userReducer";
import { userReducer_ActionTypes } from "./Hooks/Types/userReducer_ActionTypes";
import { useReducer, useEffect } from "react";
import axios from "axios";

const Users = () => {
  const [state, dispatch] = useReducer(usersReducer, INITIAL_USERS_STATE);
  const loadData = async () => {
    try {
      dispatch({ type: "FETCH_POST_PENDING", });
      let response = await axios.get(
        `https://jsonplaceholder.typicode.com/users/`
      );
      dispatch({
        type: "FETCH_POST_FUFILLED",
        payload: response.data,
      });
    } catch (err) {
      dispatch({
        type: "FETCH_POST_REJECTED",
        payload: err.message,
      });
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  //The state contains all the information for the user let display them

  return (
    <>
      <div>
        <h2>User Informations</h2>
        <div className = "user_Tag">
          <h3>username</h3>
          <h3>email</h3>
          <h3>phone</h3>
          <h3>website</h3>
        </div>

        <div className = "container_Outer">
          {state.users?.map((user) => {
            return (
              <>
                <div className = "container_Inner">
                  <p>{user?.name}</p>
                  <p>{user?.email}</p>
                  <p>{user?.phone}</p>
                  <p>{user?.website}</p>
                </div>
              </>
            );
          })}
        </div>
      </div>
      {state.pending ? (
        <h1 className = "loading" style = {{ color: "white", textAlign: "center" }}>
          Loading...
        </h1>
      ) : null}
    </>
  );
};

export default Users;

Хук useReducer сначала принимает функцию usersReducer, затем начальное состояние. Теперь мы можем деструктурировать состояние и функцию диспетчеризации.

Теперь мы можем использовать функцию dispatch для изменения состояния на основе типа действия, а также передать полученные данные, если таковые имеются, и ошибку, если таковая возникла.

Вот и все

Понравился ли вам этот пост и тема? поделитесь своими мыслями в комментариях! 🤠 увидимся в следующий раз! 😊