Redux (1)

Redux (1)

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