Хук useReducer в react

RedDeveloper
16.03.2023 11:55
Хук useReducer в react

Хук useReducer в react

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

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

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

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

несколько входов формы
несколько входов формы
выполнение api запроса
выполнение api запроса

Вместо того чтобы создавать множество различных хуков 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 для изменения состояния на основе типа действия, а также передать полученные данные, если таковые имеются, и ошибку, если таковая возникла.

Вот и все

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.