ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [recoil] selector 비동기
    기타 2021. 6. 17. 14:22
    반응형

    recoil 에서 관리하고 있는 데이터를 이용하여 비동기요청을 넣어야 하는 경우

     

    selector 내부에서 get을통해 요청용 데이터 받아와서 async 로 요청 (비동기작업) 진행한 이후 반환 해주면 selector 를 이용해 값을 받아 사용할수 있다

     

    <ErrorBoundary>

       <React.Suspense fallback={<div>Loading...</div>}>

          <CurrentUserInfo />

       </React.Suspense>

    </ErrorBoundary>

     

    suspense 나 errorBoundary 로 랲핑 하면 내부에서 비동기 작업시 발생할수있는 에러나 로딩 처리를 해줄수 있다.

    const currentUserNameQuery = selector({
      key: 'CurrentUserName',
      get: async ({get}) => {
        const response = await myDBQuery({
          userID: get(currentUserIDState),
        });
        if (response.error) {
          throw response.error;
        }
        return response.name;
      },
    });
    
    function CurrentUserInfo() {
      const userName = useRecoilValue(currentUserNameQuery);
      return <div>{userName}</div>;
    }
    
    function MyApp() {
      return (
        <RecoilRoot>
          <ErrorBoundary>
            <React.Suspense fallback={<div>Loading...</div>}>
              <CurrentUserInfo />
            </React.Suspense>
          </ErrorBoundary>
        </RecoilRoot>
      );
    }

     

    '기타' 카테고리의 다른 글

    jsx emmet  (0) 2021.07.09
    [eslint] unresolve file  (0) 2021.06.22
    [recoil] 기본  (0) 2021.06.17
    webpack 으로 환경변수 설정하느법  (0) 2021.06.15
    interceptor in <axios> //// axios setting  (0) 2021.06.15
Designed by Tistory.