👀Redux란?

상태관리 라이브러리로 애플리케이션의 복잡성을 낮추어 코드의 결과를 예측 가능하게 만들어 주는 도구

왜 사용하는가?

리덕스 공식 홈페이지 참조

• 예측 가능
  Redux는 일관적으로 동작하고, 서로 다른 환경(클라이언트, 서버, 네이티브)에서도 실행되며, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.
• 중앙화
  앱의 상태와 로직을 중앙화하여 실행 취소/다시 실행, 영속적인 상태 등의 강력한 기능을 사용할 수 있게 합니다.
• 쉬운 디버깅
  Redux DevTools는 앱의 상태가 언제, 어디서, 왜, 어떻게 바뀌었는지 쉽게 추적할 수 있도록 해줍니다.
  Redux의 아키텍처를 통해 변경사항을 기록하고, "시간여행형 디버깅"을 사용하고, 완전한 에러 리포트를 서버로 보낼 수 있습니다.
• 유연함
  Redux는 어떤 UI 레이어에서도 동작하며, 여러분의 요구에 부합하는 거대한 애드온 생태계를 가지고 있습니다.

언제 사용해야 될까?

리덕스 홈페이지에 나와있어요!

• 앱 상태가 자주 업데이트 될때
• 앱의 여러 위치에 필요한 많은 양의 상태가 있을 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때
• 앱이 중형 또는 대형 코드가 있고, 많은 사람들이 작업을 할때

❗ Redux의 3가지 원칙

1. Single source of truth

Redux 는 애플리케이션에 스토어를 만들어 그 한곳에서 상태를 관리, 즉 데이터를 중앙 집중적으로 관리

2. State is read-only

상태는 읽기 전용이다.
외부에서 데이터를 직접적으로 제어하지 못하게 막음으로써 의도하지 않게 상태가 바뀌는것을 차단한다.

3. changes are made with pure functions

변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.
리듀서는 이전상태의 액션을 받아 다음 상태를 반환하는 순수함수로, 이전 상태값을 변경하는 것이 아닌 새로운 상태값을 반환한다.

Redux의 장점

UNDO, REDO가 너무 쉽게 가능함
디버거의 통해 현재상태를 볼수 잇찌만 리덕스는 현재 상태뿐만 아니라 과거 상태를 볼 수 있다.(문제해결을 쉽게하도록 도와줌)
모듈 리로딩 가능 ( 자동으로 애플리케이션에 반영 )
리덕스를 쓰면 좋은 이유
리덕스만 가지고 있는 장점
: 시간 여행을 할 수 있따

💡 Redux Flow

출처

📢 Redux 기본 용어

1. store

정보가 저장되는 장소로 하나의 프로젝트에는 하나의 스토어만 존재한다.

• 현재의 상태 / 리듀서 / 내장함수를 포함

2. state

• 실제 정보

3. reducer

변화를 일으키는 함수로 두가지의 파라미터(현재의 상태, 전달 받은 액션)를 받아온다.
두 가지의 파라미터를 참조하여 새로운 상태를 반환

• useReducer와 같은 형태
• state를 갱신할 수 있는 유일한 함수.

4. render

• store 밖에있음
• ui을 만들어주는 내가 만드는 코드
• state값을 참조해서 ui를 만드는 코드

5. dispatch

스토어의 내장함수로 action을 발생시킴.

• dispatch라는 함수는 action을 파라미터로 전달
• 즉 Reducer 함수에게 Action을 송신

6. subscribe

state값이 바뀔때 마다 render 함수 호출 및 ui 갱신

• React에서 Redux를 사용할 때 보통 이 함수를 직접 사용하는 일은 없다.
• 대신 useSelector Hook을 사용하여 Redux Store의 상태에 구독한다.

7. getState

• state 값 가져오기

8. action

상태 변화를 일으킬 때 참조하는 객체로, 상태에 변화가 필요할 때 발생시킨다.

• 이벤트라고 생각하면 된다.
• 액션 객체는 type 필드를 반드시 가지고 있어야 함.
• 그 외 속성값은 개발자가 마음대로 추가

참조사이트
Redux 정리
6장.리덕스
Redux란
생활코딩