bkdragon's log

Redux-toolkit 을 사용해 비동기 처리를 해보자. React-query를 사용해도 좋다. Redux-toolkit에는 thunk 미들웨어가 내장되어 있어서 따로 설치할 필요가 없다. Thunk thunk는 특정 작업을 나중으로 미루기 위해 함수형태로 감싼것을 말한다. thunk는 Redux 스토어의 dispatch 및 getState 메서드를 사용하는 함수이다. 비동기 로직이 들어갈 수 있다. const getItems = () => (dispatch, getState) => { // 현재 상태 조회 const id = getState().item // 비동기 통신의 성공과 실패에 따라 다른 action을 dispatch api .getComments(id) .then(comments => di..

Redux Toolkit Redux를 편하게 사용할 수 있는 도구이다. Redux의 보일러 플레이트 코드를 줄이고 immer, reselect, redux-thunk 등의 부가 라이브러리를 통해 편의성을 증가시켰다. 우선 얼마나 코드가 줄어드는지 확인 해보자. 기존 코드 oldCounter.ts // 액션 타입에 들어갈 값 const INCREASE = 'counter/INCREASE' as const; const DECREASE = 'counter/DECREASE' as const; const INCREASE_BY = 'counter/INCREASE_BY' as const; // 액션 생성 함수 export const increase = () => ({ type: INCREASE, }); export ..