SFRによるFetch

私たちの以前の製品の組み合わせを見てみると、Reduxを不要に使っていると思います.Fetchデータをグローバルに管理したいのでReduxを使いましたが、そうなるとReduxはついついデータFetchシャトルになってしまうようです.私たちはずっと効率を考えているので、伝説のSWRを採用したいと思っています.
公式文書を読み続けて色々なテストをするので今日は入門ですSWRにしか興味がない💡

SWRの利点

ステータスは、

グローバルで管理できます.keyでデータにアクセスします.

SWRは、ポーリングによって定期的に最新のデータ状態を取得する.

ビットを必要とせずにローカルキャッシュされたデータも使用できます.

mutateでデータ更新を行う場合は、複数の操作が必要になる場合があります.

公式ページにはサンプルコードがあります.
直接引っ張ってasync wait文法でテストしましょう
App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import useSWR from 'swr'
import ItemList from './ItemList';

function App() {

  const fetcher = async(urlKey) => {
      const url = 'https://jsonplaceholder.typicode.com/posts';
      const response = await fetch(url);
      const result = await response.json();
      return result
  }
  
  const {data,error,mutate} = useSWR('/get/posts',fetcher);

  return (
    <div className="App">
        <ItemList/>
    </div>
  );
}

export default App;

ItemList.js

import React from 'react'
import useSWR from 'swr';

function ItemList() {
  const {data,error} = useSWR('/get/posts');

  console.log(data)

  return (
    <div>
      
    </div>
  )
}

export default ItemList

ItemListコンポーネントをテストして、キャッシュされたデータをグローバルにロードできるようにします.
最初のレンダリングではundefined,cache dataがロード(再レンダリング)され、データが素子によく入ります!
USSWRのパラメータを使用してキーを渡すと、そのキーにキャッシュされている(取得されたデータ)データにどの構成部品でもアクセスできます.
また、[ネットワーク]タブを表示して、定期的にデータを取得することもできます.
レポートでMutateとSWRオプションオブジェクトをよく読み、実際に使用可能な場合に使用してコンテンツを追加する必要があります.
😭 今日はSWR Hookとは何かを知りましょう

📚 リファレンス

https://swr.vercel.app/ko/docs/