리액트 - redux-thunk로 Promise 다루기(thunk 작성)

promise를 다루려면 먼저 promise를 만들어야한다.

먼저 api폴더 내부에 posts.js 파일을 생성하여 api를 만든다.

• posts : 데이터 객체
• sleep : 지연시간 생성 promise
• getPosts : 0.5초 지연시간 후 posts를 리턴한다.
• getPostById : 0.5초 지연후 파라미터로 받아온 id값과 일치하는 posts 데이터를 리턴한다.

const sleep = n => new Promise(resolve => setTimeout(resolve, n))


//{ id, title, body }

const posts = [
    {
        id: 1,
        title: '뭐요',
        body:'리덕스 미들웨어'
    },
    {
        id: 2,
        title: '첨봐요?',
        body:'redux-thunk를 써서 비동기 작업'
    },
    {
        id: 3,
        title: 'redux-saga사용',
        body:'나중에'
    },
] 


export const getPosts = async () => {
    await sleep(500);
    return posts;
}

export const getPostById = async id  => {
    await sleep(500);
    return posts.find(post => post.id === id);

};

modules 폴더 내부에는 이를 호출하는 posts.js 파일을 생성한다.

• postsAPI : api/posts에 작성했던 모듈 함수를 전부 저장한 api
• getPosts : thunk 생성함수로 요청 시작, api 호출, 성공, 실패의 경우에 각각의 action.type을 dispatch 한다. api로 getPosts를 호출
• getPost : thunk 생성함수로 getPosts와 비슷한 형태이지만 api로 getPostById를 호출한다.

import * as postsAPI from '../api/posts';


const GET_POSTS = 'GET_POST';
const GET_POSTS_SUCCESS = 'GET_POSTS_SUCCESS';
const GET_POSTS_ERROR = 'GET_POSTS_ERROR';



const GET_POST = 'GET_POST';
const GET_POST_SUCCESS ='GET_POST_SUCCES';
const GET_POST_ERROR ='GET_POST_ERROR';

/*thunk 생성 함수*/
export const getPosts = () => async dispatch => {
    //요청시작
    dispatch({type: GET_POSTS});
    //api 호출
    try{
        const posts =  await postsAPI.getPosts();
    //성공한경우 
    dispatch({
        type:GET_POSTS_SUCCESS,
        posts
    });
    } catch(e){
        //실패한 경우
        dispatch({
            type:GET_POSTS_ERROR,
            error: e
        });
    }
    
    
}

export const getPost = () => async dispatch => {
    //요청시작
    dispatch({type: GET_POST});
    //api 호출
    try{
        const post =  await postsAPI.getPostById();
    //성공한경우 
    dispatch({
        type:GET_POST_SUCCESS,
        post
    });
    } catch(e){
        //실패한 경우
        dispatch({
            type:GET_POST_ERROR,
            error: e
        });
    }
    
    
}