Redux 간단히 정리

# action -> dispatch -> reducer -> store 순서로 데이터가 단방향으로 흐르게 된다.

 

# Store

- 정보가 저장되는곳
- state가 저장되어있는공간

 

# Action

- state에 어떤 변화가 필요하면 action이 발생한다. 하나의 객체로 표현되고 액션객체는  type을 무조건 가지고있어야한다. payload는 옵션사항.

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

-보통 action을 직접 작성하기보다는 action객체를 생성하는 함수를 만들어 사용한다. 이 함수를 액션 생성자(Action Creator)라고 한다.

 

# Dispatch

- reducer로 현재의 state와 action(type, payload)을 전달한다. 그리고 state의 값을 바꾸는 역할을 한다.

 

# Reducer

- 변화를 일으키는 함수

-state를 입력값으로 받고, action을 참조해서 새로운state값을 만들어내서 리턴해주는 state를 가공하는 가공자이다.
-dispatch에게서 전달받은 action객체의 type 값에 따라서 상태를 변경시키는 함수이다. 이때 reducer는 순수함수여야한다.
-만약 여러개의 reducer를 사용하는 경우, combineReducers 메서드를 사용해서 하나의 reducer로 합쳐줄수있다.

 

# 리덕스 상태는 읽기전용이다.
Redux의 state업데이트는 immutable한 방식으로 변경해야 한다.
기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다.(원본state는 건들이지않고)
Object.assign으로 새로운 객체를 만들어 리턴해서 사용할수있다.

 

#state를 변경하는 방법
-action을 만들고,  그걸 dispatch에게 제출하면 dispatch가 reducer를 호출하는데 (그때 state와 action을 같이준다)
그럼 reducer가 state의 변경함수로 해서 최종적인 값을 return 해준다.
여기서 action은 type과 payload이다.

#component에서 store에 있던 state쓰려면  => useSelector
#컴포넌트에서 state수정요청하려면 => dispatch

 

#useSelector()
-컴포넌트와 state를 연결하여 Redux의 state에 접근할수있게 해주는 메서드이다.

#useDispatch()
-action객체를 reducer로 전달해주는 dispatch함수를 반환하는 메서드이다.