redux reducer switch문에서 주의할 점

TOC

1. 주의할 점

주의할 점

주의할 점이라는 것은 이것이다.

const reducer = (prevState, action) => {
  switch (action.type) {
    case 'LOG_IN':
      return {
        ...prevState,
        id: action.data,
      };
    case 'LOG_OUT':
      return {
        ...prevState,
        id: null,
      };
    case 'ADD_POST':
      return {
        ...prevState,
        posts: [...prevState.posts, action.data],
      };
    default:
      return { 
        prevState;
       };
  }
};

const initialState = {
  id: null,
  posts: [],
};

위 코드의 문제점은 무엇일까?

prettier가 이쁘게 정돈하고 vscode도 아무런 문제가 없다고 한다.

문제점은 바로 default값이다.
이미 객체인 initialState를 다시 객체에 담아 리턴을 해주므로
우리가 원하는 대로의 동작이 일어나지 않게된다.

특히 ADD_POSt에서는 말이다.

따라서 코드를 이렇게 수정하도록 하자.

...
default: return initialState;

이 문제가 일어나기 쉬운 맹점인 이유는 switch-case 형태로 위와 똑같이 return을 해주다가 그냥 못보고 지나치는 경우가 발생하기 쉽기 때문이다.

xxx is not iterable 오류로 고생을 하지 않길 바란다.