[28] 리덕스 ver.간단 설명

리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 입니다.

리덕스를 사용하면 훨씬 코드가 깔끔해집니다.

 

왼쪽은 리덕스 사용 안함. 오른쪽은 리덕스 사용함

리덕스를 이용하면 한 곳에 관리를 합니다. 로직이 깔끔해지고 어떤 것을 구현할 때 쉬워집니다.

 

---

리덕스의 흐름?

-> 한 방향으로만 흐릅니다.

 

그림을 간단히 설명하자면, 어떤 사람이 입금(deposit), 출금(withdraw)을 할 수 있다고 가정해보겠습니다.

처음에는 0달러인데, 10달러를 입금한다고 했을 때, 0달러라는 데이터를 10달러로 업데이트한 뒤에 10달러가 업데이트 되면 화면에 나타나게 해줍니다. store에 있는 0달러를 10달러로 변경한 다음, 변경된 값을 구독하는 컴포넌트들은 리 렌더링 되게 됩니다. 

 

정리하자면,

Action

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

- 현재 무슨 일이 일어났는지 알려주는 객체입니다.

 

REDUCER

- 리듀서는 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수입니다.
그들은 인수로 조치를 취하고 store 내부의 상태를 업데이트합니다.

- 타입과 payload에 따라서 함수를 리턴해줍니다.

 

REDUX STORE

- 객체 저장소 Redux Store는 애플리케이션의 전체 상태 트리를 보유합니다.
내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것입니다.
Redux Store는 클래스가 아닙니다. 몇 가지 Methods가 있는 객체일 뿐입니다.

 

DISPATCH

dispatch는 스토어의 내장 함수 중 하나로 리듀서 함수에게 action을 발생하라고 시키게 됩니다.
dispatch(action) 이런 식으로 action을 인자로 넘겨서 사용합니다.