recoil을 활용하여 REST API 요청하기

 

도서 <리액트 네이티브를 다루는 기술>을 읽고 도움이 될 만한 부분을 기록합니다

atom으로 상태 만들기

export interface Post {
  id: number;
  title: string;
  body: string;
}

import {atom} from 'recoil';
import {Post} from '../api/types';

interface PostsState {
  loading: boolean;
  data: Post[] | null;
  error: Error | null;
}

export const postsState = atom<PostsState>({
  key: 'postsState',
  default: {
    loading: false,
    data: null,
    error: null,
  },
});

 

 

REST API 호출

import axios from 'axios';
import {Post} from './types';

export async function getPosts() {
  const response = await axios.get<Post[]>(
    'https://jsonplaceholder.typicode.com/posts',
  );
  return response.data;
}

 

 

상태를 관리하는 user-defined hooks 만들기

import {useCallback, useEffect} from 'react';
import {useRecoilState} from 'recoil';
import {getPosts} from '../api/getPosts';
import {postsState} from '../atoms/posts';

export default function usePosts(
  {enabled}: {enabled: boolean} = {enabled: true},
) {
  const [{loading, data, error}, set] = useRecoilState(postsState);

  const fetchData = useCallback(async () => {
    set({loading: true, data: null, error: null});
    try {
      const posts = await getPosts();
      set({loading: false, data: posts, error: null});
    } catch (e) {
      set({loading: false, data: null, error: e});
    }
  }, [set]);

  useEffect(() => {
    if (!enabled) {
      return;
    }
    fetchData();
  }, [enabled, fetchData]);

  return {
    loading,
    data,
    error,
    refetch: fetchData,
  };
}

 

 

활용하기

import usePosts from '../hooks/usePosts';

//...
const {data, loading, refetch} = usePosts();
<Button
  title="새로고침"
  onPress={() => {refetch;}}
  disabled={loading}
  />