Redux

리덕스(Redux)란?

Redux는 JS app을 위한 관리 라이브러리입니다.

 

props vs state vs redux

props	state
properties의 줄임말. 구성 요소가 서로 통신하는 방법임.	컴포넌트 안에서 데이터를 전달할 때 state사용
props는 상위 구성 요소에서 아래쪽으로 흐름	mutable
자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 변경해야 함	state가 변하면 re-render 됨

redux는 state를 관리하는 것입니다.

 

redux 데이터 Flow(strick unidirectional data flow)

ACTION은 간단한 JS 객체입니다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성을 가질 수도 있습니다.

REDUCER는 app 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수입니다. 그들은 인수로 조치를 취하고 store 내부의 상태를 업데이트합니다.

Redux Store는 이들을 하나로 모으는 객체 저장소이며 app의 전체 상태 트리를 보유합니다. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 action을 전달하는 것입니다. redux store은 클래스가 아니며 몇 가지 methods가 있는 객체입니다.

앱에는 store는 하나만 있어야 합니다.

 

Redux Provider

Provider란?

<Provider> 구성 요소는 redux store 저장소에 액세스해야 하는 모든 중첩 구성 요소에서 redux store 저장소를 사용할 수 있도록 합니다.

react redux 앱의 모든 react 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 <Provider>를 렌더링합니다.

그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공된 저장소 인스턴스에 액세스할 수 있습니다.

 

useSelector & useDispatch

위에 두 hooks를 이용해서 provider로 둘러 쌓인 컴포넌트에서  store에 접근 가능합니다.

 

redux 미들웨어

redux 미들웨어는 액션을 dispatch전달하고 redux에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자입니다.

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

 

redux Thunk

redux를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이 redux-thunk입니다.

이것도 앞서 말했던 redux 미들웨어입니다.

지금 일부 논리(logic)를 실행하는 대신 나중에 작업을 수행하는 데 사용할 수 있는 함 수 본문이나 코드를 작성할 수 있습니다.

redux thunk를 사용함으로써 action 생성자가 그저 하나의 액션 객체를 생성할 뿐 아니라 그 내부 안에서 여러 가지 작업을 할 수 있게 만들어 줍니다.