리덕스(Redux)

리덕스란?

자바스크립트 어플리케이션을 위한 상태 관리 라이브러리

 

 

 

리덕스 Data Flow

 

Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음

 

Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함

 

Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐

 

Dispatch: 스토어 내장 함수 중 하나로 리듀서에 Action을 발생하라고 시킴. dispatch(action)으로 action을 인자로 넘겨서 사용

 

 

 

Redux Provider란?

Provider 구성 요소는 Redux store 저장소에 엑세스해야 하는 모든 중첩 구성 요소에서 Redux sotre 저장소를 사용할 수 있도록 함

즉, 컴포넌트가 여러 개 있으면 redux store에 있는 state에 접근할 수 있게 해주는 것

 

Provider로 둘러쌓고 Provider에 store 속성 넣어주면 그 안의 컴포넌트에서는 store에 접근 가능함

접근할 때 사용하는 것이 useSelector와 useDispatch

 

 

useSelector & useDispatch란?

useSelector: useSelector Hooks를 이용해 스토어의 값 가져올 수 있음

 

useDispatch: store에 있는 dispatch 함수에 접근하는 hooks

 

 

 

리덕스 미들웨어란?

액션을 dispatch 전달하고 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자

로깅, 충돌 보고, 비동기 API와 통신, 라우팅 등을 위해 미들웨어를 사용

 

 

 

리덕스 Thunk란?

리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법

 

 

Thunk란?

일부 지연된 작업을 수행하는 코드 조각

// 즉시 실행
let x = 1 + 2

// 함수를 실행했을 때 실행
let foo = () => 1 + 2

 

 

비동기 작업을 해야 할 때는?

서버에 요청을 보내서 데이터를 가져올 때 주로 비동기 요청을 보냄