[React.js] Redux (1)

카테고리 : Development
태그: development · react · Redux · State · Action · Reducer · Dispatch · ActionCreator · AsyncAction · Middleware · Store · StoreCreator · StoreEnhancer
등록일: 2023년 04월 07일
최근 업데이트: 2023년 04월 07일

---

• Redux

Redux

JavaScript 애플리케이션을 위한 상태 관리 도구

React 유사 프레임워크 는 물론 Angular 및 일반 JavaScript와도 호환 가능함

단방향 데이터 흐름

사용하는 이유

• 애플리케이션이 더 복잡해짐에 따라 도 많은 상태를 자바스크립트 코드로 관리할 필요가 있기 때문

1. 원칙 :

• 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장
• 상태는 읽기 전용이다
• 변화는 순수 함수로 작성

1. 간단 용어 :

• State : [getState()](https://ko.redux.js.org/api/store#getState)에 의해 반환되는 하나의 상태값
• Action : 상태를 변화시키려는 의도를 표현하는 평범한 객체 (액션은 어떤 형태의 액션이 행해질지 표시하는 type 필드를 가져야 함)
• Reducer : 누적값은 상태 객체이고, 누적될 값은 액션 (가장 중요한 개념)
• Dispatch : 액션이나 비동기 액션을 받는 함수
• ActionCreator : 액션을 만드는 함수
• AsyncAction : Promise나 Thunk와 같은 비동기 기본형으로, 리듀서에게 직접 전달되지는 않지만, 작업이 완료되면 액션을 보냄
• Middleware : 디스패치 함수를 결합해서 새 디스패치 함수를 반환하는 고차함수. 이들은 종종 비동기 액션을 액션으로 전환
• Store : 애플리케이션의 상태 트리를 가지고 있는 객체
• StoreCreator :
• StoreEnhancer : 저장소 생산자를 결합하여 강화된 새 저장소 생산자를 반환하는 고차함수

# 1. Redux 파일 구조 셋팅 => 폴더 구조는 깔끔하나 추가할 경우 세 개의 파일을 수정해야함

src
└── store                    //store상태 트리 객체
      ├── store.ts           //Redux 저장소를 만드는 함수
			├── (상태관리1)          //폴더명
					├── action.ts     //상태 변화 시킬
					├── reducer.ts    //누적값은 상태의 객체 , 누적값은 액션
					└── actionType.ts  //액션 타입을 넣어줌
			├── (상태관리2)//  폴더명
					├── action.ts
					├── reducer.ts
					└── actionType.ts

# 2. Redux 파일 구조 셋팅 => 모듈화

src
└── store                    //store상태 트리 객체
      ├── store.ts           //Redux 저장소를 만드는 함수
			├── 상태관리1.ts
			└── 상태관리2.ts