Recol -状態を管理する非同期の方法[パート1 ]

以前はいくつかの反跳用語の概観とどのように使用して状態を管理する.
ここでは反跳の非同期側を探索する.

反跳非同期状態管理サポート

反応する<Suspense/> . フォールバックUIは、保留中の要求が完了するまでレンダリングされます.

反応なしで<Suspense/> , CORMIILフックからのデータのステータスは、まだ読み込みまたは完了またはエラーをキャッチしているかどうかをチェックするために使用することができます.

取得し、APIからデータを表示するアプリを作成してみましょう
まず、新しいものを作るcreate-react-app そして、新しいプロジェクトとラップのためにそれをきれいにしてください<RecoilRoot/> ルート周辺.
1 .はじめにSelector これはデータを取得します.

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 (
    <div> 
        <p> Recoil Example </p>
    </div>
  );
}

export default App;

使用selector データを取得するfetch .

私たちはasync 関数へget 取得したデータを返すパラメータです.

私たちは価値をatom ユーザーID、ページ番号、認証キーのようなURLパラメータやボディデータを設定するには、この時点でスキップします.

2 .コンポーネントを作成する<DetailsWithSuspense/> これはfetchUserDetails Selector データをレンダリングする.

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 => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <p> Recoil Example </p>
    </div>
  );
}

export default App;

ここではuseRecoilValue フックの購読と値を取得するfetchUserDetails Selector .

しかし、我々はまた、使用することができますuseRecoilState フック値と値を設定する関数を取得します.(ここでは、セレクタが返すデータとして値を設定することはできません)

3 .追加しましょう<Suspense/> 非同期データをレンダリングするには

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 => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <React.Suspense fallback={<div>Loading...</div>}>
           <DetailsWithSuspense />
        </React.Suspense>
    </div>
  );
}

export default App;

我々はラップ<DetailsWithSuspense /> with <Suspense/> これは保留中のデータの面倒を見るfallback 非同期呼び出しが完了したりエラーが発生するまでコンポーネントをレンダリングします.

エラー処理コンポーネントを作成するには、Error Boundaries .

<サスペンス>があなたの方法でないならば、反則はまだあなたの背中を得ました！👇

4 .別のコンポーネントを作成し追加する<DetailsWithoutSuspense /> これはfetchUserDetails Selector データをレンダリングする.

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 <div> There is some problem! </div>
    }

    if(state === 'loading'){
        return <div>Its loading</div>
    }

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

    }
}

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

    return (
        data.map(item => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <DetailsWithoutSuspense />
        <React.Suspense fallback={<div>Loading...</div>}>
           <DetailsWithSuspense />
        </React.Suspense>
    </div>
  );
}

export default App;

使用するuseRecoilValueLoadable 予約するフックfetchUserDetails Selector .

さらにuseRecoilValueLoadable オブジェクトを返すstate key現在の状態を保持します.
A .hasError : エラーが発生したときに設定する
b .loading : データが保留中のときに設定する
c.hasValue : データが正常に受信されたときに設定する

に応じてstate 値に応じて、コンポーネントをレンダリングできます.

時state 値がhasValue , the object returned by useRecoilValueLoadable 保留中のデータを保持するcontents キー.

これは、データを非同期的に反跳APIを使用して取得する小さなフェッチデータアプリケーションを完了します.あなたがより構造化されたアプローチを見たいならば、以下のチェックアウトGitHubリポジトリ.

シュブハクク / recoil asyncの例

反跳の非同期側を試みる

次に探りますselectorFamily これはselector パラメータを受け入れます.
最後に感謝したいReqres テストするAPIを与えるために.