[Redux] Action, Reducer, Store, Dispatch, Subscribe

2022.02.14 - [react] - [React] 리덕스 (Redux) vs Context API

[React] 리덕스 (Redux) vs Context API

---

리덕스에서 사용되는 키워드

1. 액션 Action

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생 시킵니다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이뤄져 있습니다.

액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다.

{
    type:"REDUX_TEST",
    data:{
    	id:0,
        text:"type를 제외하고 마음대로 넣을 수 있습니다"
    }
}

 

2. 액션 생성함수 Action Creator

액션 생성함수는, 액션을 만드는 함수입니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어줍니다.

이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용합니다.

리덕스를 사용 할 때 액션 생성함수를 사용하는 것이 필수적이진 않습니다. 액션을 발생 시킬 때마다 직접 액션 객체를 작성 할 수도 있습니다.

 

3. 리듀서 Reducer

리듀서는 변화를 일으키는 함수입니다. 리듀서는 두가지의 파라미터를 받아옵니다.

리듀서는 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다.

function reducer(state, aciton){
	// 상태 업데이트 로직
	return newState;
}

 

4. 스토어 Store

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가 있고, 추가적으로 몇가지 내장 함수들이 있습니다.

 

 

5. 디스패치 Dispatch

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 '액션을 발생 시키는  것' 이라고 이해하면 됩니다.

디스패치 함수에는 액션을 파라미터로 전달합니다. (dispatch(action))

호출을 하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어 줍니다.

 

 

6. 구독 Subscribe

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직쩝 사용하는 일은 별로 없습니다. 그 대신에 react-redux 라이브러리를 사용할 때는 useSelect Hook/ connect 함수를 사용하여 리덕스 스토어의 상태에 구독합니다.