-
[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