코드숨 리액트 6기 5차 회고

redux-thunk

redux-thunk를 middleware로 추가하면 기존에 action type과 payload를 반환하던 action외에도 dispatch와 getState 두개의 함수를 인자로 받는 callback함수를 반환하는 action을 사용할 수 있습니다.

action 테스트

과제를 수행하면서 비동기 action에 대해서는 어떤식으로 테스트를 작성해야 할 지 고민을 많이 했습니다.

// action.jsexport function setRegions(regions) {  return {    type: ACTION_TYPES.SET_REGIONS,    payload: { regions },  };}
// reducer.jsexport default function reducer(state = initialState, action) {
if (action.type === ACTION_TYPES.SET_REGIONS) {
return {
...state, regions: action.payload.regions, } } return state;}
// reducer.test.jsit('returns state with new regions', () => {  const regions = [{ id: 1, name: '서울' }];  const state = reducer(undefined, setRegions(regions));  expect(state.regions).toEqual(regions);});
// actoin.jsexport function fetchRegions() {  return async (dispatch, getState) => {    const regions = await apiService.fetchRegions();    dispatch(setRegions(regions));  };}
// action.test.jsconst fetchedRegions = [{ id: 1, name: '서울' }];
const dispatch = jest.fn();
it('callback calls dispatch', async () => { const callback = fetchRegions(); await callback(dispatch, () => ({ regions: [] })); expect(dispatch).toBeCalledWith(setRegions(fetchedRegions));});

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store