• TOC {:toc}

이 글은 벨로퍼트와 함께하는 모던 React 중 [2. 리덕스의 3가지 규칙(https://react.vlpt.us/redux/02-rules.html)의 내용을 복습하기위해 핵심 내용을 요약 정리한 글입니다.

  • 제가 필요한 부분 위주로 확인하면서 정리하고 있어 글에 덜 작성된 부분이 있을 수 있습니다.
  • 글 작성 후 원문의 내용이 수정되거나 내용을 이해하기 위한 개인적인 설명이나 해석이 있을 수 있습니다. 되도록 원문을 참고해주시길 바랍니다.
  • 잘못된 부분이 있다면 댓글이나 그 외 편하신 방법으로 알려주시면 감사하겠습니다.

리덕스를 사용할 때 꼭 지켜야 할 세 가지 규칙

1. 하나의 애플리케이션 안에는 하나의 스토어만 존재

  • 여러 스토어를 만드는 것 자체는 가능하나 권장되지 않는다.
  • 여러 스토어를 만들 수도 있는 경우
    • 특정 업데이트가 너무 빈번하게 일어나거나
    • 애플리케이션의 일부가 완전히 독립적일 때
  • 스토어를 여러 개 만들면 개발 도구를 활용하지 못하게 된다.

2. 상태는 읽기 전용

리액트에서 state를 업데이트할 때 불변성을 유지한다.

  • setState 사용
  • 배열을 업데이트할 때는 push 등으로 배열을 직접 수정하지 않고 concat 등을 사용해 시로운 배열을 만들어서 교체하는 식으로 업데이트
  • 객체도 Object.assign을 사용하거나 spread 연산자(...)를 사용해서 업데이트

리덕스도 마찬가지로 기존의 상태를 건들이지 않고 새로운 상태를 생성하여 업데이트해야 한다.

3. 리듀서(변화를 일으키는 함수)는 순수 함수

다음 3가지 사항에 주의한다.

  • 리듀서 함수는 이전 상태와 액션 객체를 매개변수로 받는다.
  • 이전의 상태는 절대 변경시키지 않고, 변경사항을 적용시킨 새로운 상태 객체를 만들어 반환한다.
  • 똑같은 매개변수로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다.

인풋이 같다면 아웃풋이 같아야 한다.

실행할 때마다 결과값이 다른 작업들(e.g., new Date(), 랜덤 숫자 생성, 네트워크 요청)은 리듀서 함수 밖에서 처리해줘야 한다. 이를 위해 리덕스 미들웨어를 사용하며 관련 내용은 이후에 다룰 것이다.