Redux 사용 시 주의사항

Redux 사용 시 주의사항

state 업데이트

Redux가 기존의 state를 새로운 state로 대체하기 위해서 새로운 객체인 새 snapshot을 항상 반환해야 한다.

이전 state를 덮어쓰기 때문에 state를 업데이트할 때는 업데이트 하려는 state 외에 다른 state를 설정해야한다.

여기서 왜 state에 직접 접근하여 업데이트하지않고 새로운 상태로 반환해야하는지 의문이 생길 수 있다.

만약 아래와 같이 코드를 작성한다면 작동이 될 것이다.

하지만 이것이 작동되는 것처럼 보이지만 잘못된 것이며 절대 기존의 state를 변형해서는 안된다.

항상 새로운 state 객체를 반환하여 재정의한다.

if (action.type === 'increment') {
    state.counter++;
    return state;
  }

새로운 state 객체를 반환할지라도 마찬가지로 여전히 기존의 state를 변형시키기 때문에 아래와 같은 코드도 사용해서는 안된다.

if (action.type === 'increment') {
    state.counter++;
    return {
      counter: state.counter,
    };
  }

기존의 state를 절대 변경해서는 안되는데 이로 인해 버그인 예측 불가능한 동작이 발생할 수 있고 프로그램을 디버깅하는 것도 어려워 질 수 있기 때문이다.

또한 버그가 발생하지 않더라도 state가 동기화되지 않는 더 큰 애플리케이션에서 예기치 않은 부작용이 생길 수 있고 갑자기 UI가 더이상 state를 정확히 반영하지않을 수 있다.

액션 타입 식별자

애플리케이션의 규모가 더 커질 경우 즉 리덕스에서 관리해야 할 상태가 더 많아지게 되면 액션 타입에서 문제가 생길 수 있다.

액션 타입의 식별자는 오타가 나서는 안된다.

오타가 나면 리듀서가 처리하지 못하거나 혹은 올바르게 처리되지 않는다.

작은 애플리케이션에선 문제가 되지 않지만 애플리케이션이 커지면여러 개발자가 같이 작업하고 서로 다른 액션이 많을 때 이런 식별자 중 하나를 놓칠 수 있고 식별자의 충돌이 발생할 수도 있다.

그래서 이런 식별자들을 한 번 정의해놓고 그 정의한 이름을 사용할 수 있다.

이런 문제를 해결하는 방법은 상수를 생성하고 식별자를 저장하는 것이다.

export const INCREMENT = "increment";

  if (action.type === INCREMENT) {
    return {
      counter: state.counter + 1,
    };

많은 state

데이터와 상태가 많을수록 상태 객체도 점점 커지며 많은 상태를 복사해야 한다.

또한 리듀서 함수의 길이가 점점 길어지고 어느 순간 유지할 수 없을 만큼 리덕스 파일이 거대해질 수도 있다.

항상 새로운 상태의 snapshot을 반환해야 하며 기존의 state를 변경할 수 없는데 중첩된 객체 및 배열이 있어서 중첩된 데이터를 바꾸면서 실수 할 수 있다.

이에 대한 해결책으로는 리듀서를 여러 작은 리듀서로 나누어 관리하는 것이다.

Redux toolkit라는 라이브러리를 통해서 이러한 문제점을 해결하고 리덕스를 더 편리하고 쉽게 작동할 수 있게 할 수도 있다.