useReducer를 활용한 상태관리 흐름

- useReducer Hooks API는 flux 아키텍쳐를 따른다.

- useReducer API는 복잡한 상태관리에서 useState보다 유리하다.

- useReducer는 구체적인 상태변경을 감추고, reducer에게 맡길 수 있고, 콜백(setState 등)을 계속 하위 component에 전달해줘야 하는 불편함을 줄일 수 있다. 대신 dispatch라는 매개체 역할의 함수를 전달해준다.

 

https://krasimir.gitbooks.io/react-in-patterns/content/chapter-08/fluxiny_basic_flux_architecture.jpg

 

* flux 아키텍처

- dispatcher는 애플리케이션에서 발생하는 모든 action을 수신하고 이 action을 처리할 적절한 store에게 전달한다.

- action은 dispatcher에 전달되는 객체로 애플리케이션에서 발생하는 이벤트나 사용자의 상호작용을 나타낸다.

- store는 애플리케이션의 상태와 데이터를 저장하고, 이를 관리하는 역할을 한다. store는 dispatcher로부터 전달된 액션을 수신하여 해당 액션에 대한 로직을 처리하고, 결과를 저장한다.

- view는 사용자에게 보여지는 화면을 표시하는 역할을 한다.

 

* useReducer의 상태관리 흐름

const reducer = (state, action) => {
	//...
}

const [state, dispatch] = useReducer(reducer, initialArg, init?)

const handleClick = () => {
	dispatch({ type : "INCREMENT" })
}

 

- React는 reducer 함수에 현재 state와 dispatch한 액션을 전달하고, 그 결과를 다음 state로 설정한다.

- reducer : reducer 함수는 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수이다.

- dispatch : dispatch 함수는 다음 렌더링에 대한 state 변수만 업데이트한다.

- acttion : 사용자가 수행한 작업을 의미한다. 

- disaptch 함수를 호출하여 액션(일반적으로 {type : "INCREMENT", payload : 1 } 형식의 객체로 정의)을 디스패치하면 reducer 함수에게 전달되고, reducer 함수는 현재 상태와 액션을 기반으로 새로운 상태를 계산하고 반환한다.

- reducer 함수에서 반환한 새로운 상태는 state 변수를 통해 접근할 수 있으며, 이 새로운 상태가 컴포넌트의 렌더링에 반영된다.