Отдача - Асинхронный способ управления состоянием [Часть 1]

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

Здесь мы рассмотрим Асинхронная сторона отдачи.

Отдавать асинхронные государственные управления поддержкой –

Реагировать Анкет Пользовательский интерфейс запасного, пока не будет выполнен ожидающий запрос на рассмотрение.
Без реагирования , Статус данных из крючков отдачи может использоваться, чтобы проверить, остается ли он все еще загрузка или завершен или поймали Ошибка Анкет

Давайте создадим приложение, которое будет извлекать и отобразить данные из API

Для начала создайте новый Создать-реакт-приложение и очистите его для нового проекта и оберните вокруг корня.

1. Начнем с написания a Селектор который принесет данные.

import React from 'react';
import { selector } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

function App() {
  return (
     
         Recoil Example 
    
  );
}

export default App;

Используя Селектор Мы получаем данные с Fetch Анкет
Мы устанавливаем Асинхронизация функция получить параметр, который вернет избираемые данные.
Мы можем использовать значение из атом Чтобы установить параметр URL или данные тела, такие как идентификатор пользователя , Номер страницы и АВТОР КЛЮЧ Но мы пропускаем это на этот раз.

2. Мы создаем компонент под названием который будет подписаться на Селектор FetchuserDetails и рендеринг данных.

import React from 'react';
import { selector, useRecoilValue } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            
                
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                
            
        ))
    );
}


function App() {
  return (
     
         Recoil Example 
    
  );
}

export default App;

Здесь мы используем userecoilValue зацепить, чтобы подписаться и получить значение FetchUserDetails Selecter Анкет
Но мы также можем использовать userecoilstate зацепите, чтобы получить значение и функцию, чтобы установить значение. (Здесь мы не можем установить значение как данные, возвращаемые селектором, это только чтение )

3. Далее, давайте добавим Чтобы отобразить асинхронные данные

import React from 'react';
import { selector, useRecoilValue } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            
                
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                
            
        ))
    );
}


function App() {
  return (
     
        Loading...}>

); } export default App;

Мы завершаем с который заботится о ожидающих данных, пока запасная сторона Компонент отображается до тех пор, пока асинхронный вызов не будет завершен или не получит ошибок.
Чтобы создать компонент обработки ошибок, см. Границы ошибок Анкет

Если не ваш путь, отдача все еще получил вашу спину! 👇

4. Мы создаем и добавляем другой компонент под названием который будет подписаться на Селектор FetchuserDetails и рендеринг данных.

import React from 'react';
import { selector, useRecoilValue, useRecoilValueLoadable } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithoutSuspense = () => {

    const userDetails = useRecoilValueLoadable(fetchUserDetails);
    const { state } = userDetails;

    if (userDetails.state === 'hasError') {
        return  There is some problem! 
    }

    if(state === 'loading'){
        return Its loading
    }

    if(state === 'hasValue'){
        const { contents: { data }} = userDetails;
        return (
            data.map(item => (
                
                    
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}.   
                   
                
            ))
        );

    }
}

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            
                
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                
            
        ))
    );
}


function App() {
  return (
     
        
        Loading...}>

); } export default App;

Мы используем userecoilvalueluleadable крючком, чтобы подписаться на FetchUserDetails Selecter Анкет
Далее, userecoilvalueluleadable Возвращает объект с Государство Ключ, который содержит текущее состояние ожидающих данных, которые могут быть либо –

a. Haserror : установить, когда возникает ошибка b. загрузка : установить, когда данные ожидаются c. hasValue : Установите, когда данные успешно получены
В зависимости от Государство Значение, компонент может быть выполнен соответственно.
Когда Государство Значение установлено на hasvalue , объект, возвращенный userecoilvalueluleadable хранит данные, которые находились в ожидании в Содержание ключ.

Это завершило бы приложение Little Fetch Data, которое асинхронно получает данные с использованием API отдачи. Если вы хотите увидеть более структурированный подход, зарегистрируйте репозиторий GitHub ниже.

Shubhaemk/Recoil-Async-example

Попробовать асинхронную сторону отдачи

Далее я буду изучать Селекторная семья что похоже на Селектор но принимает параметр.

В конце я хотел бы поблагодарить Reqres для предоставления API для тестирования.

Оригинал: “https://dev.to/shubhamk/recoil-the-asynchronous-way-to-manage-state-part-1-18kk”

Если не ваш путь, отдача все еще получил вашу спину! 👇

Shubhaemk/Recoil-Async-example

Попробовать асинхронную сторону отдачи

Читайте ещё по теме: