[프리온보딩] 기업과제 #5 (3주차) - Redux toolkit으로 비동기 요청하기

redux로 비동기 통신을 처리해야 하는 과제가 주어졌다 . 하지만 리덕스로 비동기 처리하기 위해선 미들웨어를 설치해야 하는데 나는 리덕스 툴킷에 내장 되어있는 thunk api를 사용해 비동기 통신을 요청해 보고자 하였다.

createAsyncThunk는 비동기 작업을 처리하는 action을 만들어줍니다.

redux가 아닌  리덕스 툴킷을 사용하고자 하는 이유는 다음과 같다 . 

<redux 단점 >

- 설정이 어렵다. 

-미들웨어 설치가 따로 필요하다

-리덕스 툴킷은 더이상 다양한 패키지들를 설치 하지 않아도 됩니다. 리덕스를 사용하면 redux devtool, immer, thunk 등 여러가지 라이브러리를 추가적으로 설치해야 하지만, redux-toolkit 내부에 이미 설치가 되어 있기에 굳이 설치 할 필요가 없습니다.

-반복되는 코드가 많다 . 예를 들어 action 을 dispatch 할때 쓰는 action create을 항상 코딩해야 하기 떄문 툴킷은 자동으로 설치해준다

-불변성 유지가 어렵다 . 

 

 

✔CRUD 구현

 

<createAsyncThunk 사용하기>

✍️비동기 처리를 할 때, 대표적으로 사용되는 3가지 상태

pending 이란 비동기작 업을 시작했을때의 상태

fulfilled 이란 비동기작업이 끝났을때 (data를 가져왔을때)

rejected 란 오류가 발생해서 중다됐을때 

 

createSlice의 extraReducres를 통해 이런 비동기 상태를 쉽게 제어할 수 있다.

 

✍️오류 처리하기

• createAsyncThunk는 결과에 상관없이 무조건 항상 이행된 프로미스를 반환한다. 따라서, 오류 처리는 별도의 방법을 사용해서 진행해야 한다.
• rejectedValue(value) 함수를 사용해서 createAsyncThunk 내부에서 오류 처리

❤️get 요청

-reducer 만들기

-리스트 받아오기

import { getList, deleteList } from '../store/commentReducer';
import { useDispatch, useSelector } from 'react-redux';

 
  
function CommentList() {
 const dispatch = useDispatch();
  const List = useSelector(state => state.contents.comment);
  useEffect(() => {
    dispatch(getList());
  }, []);
  
    return (
    List &&
    List.map((comment, key) => (
      <Comment key={key}>
        <img src={comment.profile_url} alt="" />
        {comment.author}
        <CreatedAt>{comment.createdAt}</CreatedAt>
        <Content>{comment.content}</Content>
        <Button>
          <a>수정</a>
          <a onClick={e => onDelete(e, comment.id)}>삭제</a>
        </Button>
        <hr />
      </Comment>
    ))
  );
}

export default CommentList;

 

 

 

참고  : https://velog.io/@kyungjune/reduxtoolkit%EA%B3%BC-thunk-%EA%B8%B0%EB%B3%B8%EA%B0%9C%EB%85%90-%EC%97%B0%EC%8A%B5

redux/toolkit과 thunk 기본개념 연습

참고 : https://velog.io/@raejoonee/createAsyncThunk

Redux Toolkit의 createAsyncThunk로 비동기 처리하기