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

테스트를 연습하기 위해 간단한 todo app을 react + typescript + jest + redux를 사용해서 만들어보았다. 직접 해본 결과 redux test 과정은 크게 두가지이다. reducer 테스트 action 객체 생성 테스트 (dispatch 테스트) 이 두가지 테스트를 통해 redux의 기능이 정상 작동하는 것을 브라우저를 사용해 직접 테스트하지 않아도 알 수 있다. reducer 테스트 store/_reducer/todo.ts reducer를 이렇게 작성했다. const TodoSlice = createSlice({ name: 'todo', initialState: [] as StateProps, reducers: { addTodo: (state: StateProps, actio..

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