[8/31] Reducer

Redux 사용하는 이유

1. props 

하위 컴포넌트에서 props를 사용하려면 상위 컴포넌트부터 내려줘야 하는데 이 과정에서 props가 필요없는 컴포넌트들한테까지 props를 내려줘야 하기 때문이다. (props driling 발생) 

2. state 관리

Redux의 각 역할

Store : 상태가 관리되는 오직 하나뿐인 저장소의 역할

Reducer : 새로운 state를 만드는 순수 함수

Action : state를 어떻게 변경할지 정의 해놓은 객체

useDispatch : Action 객체를 Reducer로 전달해 주는 메서드

useSelector : 컴포넌트와 state를 연결하여 Store에 저장된 state에 접근할 수 있게 해주는 메서드

 

Redux 데이터의 흐름

* 참고

* 엄격한 일방향 데이터 흐름을 가지고 있다

Action → Dispatch → Reducer → Store

 

Reducer

순수함수여야 한다.

외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문이다.

 

Action

어떤 액션을 취할 것인지 정의해 놓은 객체

type은 필수로 지정을 해 줘야 한다. 해당 Action 객체가 어떤 동작을 하는 지 명시해주는 역할을 하기 때문에 "대문자와 Snake Case"로 작성한다. 필요에 따라 payload를 작성해 구체적인 값을 전달한다.

 

보통 Action을 직접 작성하기 보단 객체를 생성하는 함수를 만들어 사용하는 경우가 많다. 이런 함수를 액션 생성자라고 한다.