12장 리덕스를 이용한 상태 관리 - 민정

[quokka-eating-carrots]

리덕스 미들웨어

액션이 스토어로 전달된 후 리듀서에 도달하기 전과 상태 변경이 완료된 후에 수행할 중앙집중화된 작업을 지정할 수 있는 함수. 리덕스 미들웨어는 스토어 내부에 등록한다. 리덕스가 단일 스토어 아키텍처이기 때문에 스토어에 들여다 볼 수 있는 요소를 설치하면 모니터링, 비동기, 로깅 등의 다양한 작업을 수행할 수 있는데, 스토어에 설치하는 요소가 리덕스 미들웨어이다.

middleware(store)(next)(action) 이런 형태의 커링 함수(curring)를 사용하게 되는데 store는 리덕스 스토어, action은 스토어로 전달되는 액션 메시지, next는 dispatch() 함수이다. 한 미들웨어에서 리듀서로 전달하기 전의 실행이 완료되면 next(action)을 호출하여 다음 리듀서로 action을 전달해 줄 수 있다. 만약 액션을 전달해 주지 않으면 다음 미들웨어는 물론이고 리듀서로 액션이 전달되지 않으므로 상태를 변경하지 않을 것이다.

미들웨어를 추가하려면 순서대로 concat()함수로 추가한다.

@reduxjs/toolkit은 직렬화 가능 여부, 불변성 제공 여부를 체크하는 내장된 기본 미들웨어와 비동기 처리를 위한 redux-thunk 기능을 제공하는 미들웨어를 내장하고 있다. 해당 프로젝트의 Date 타입을 사용하는 currentTime은 직렬화가 지원되지 않으므로 경고가 발생할 수 있으므로 serializableCheck 옵션을 false로 지정하였다.

loggerMW의 내용을 개발할 때 확인할 수 있는 것

• 전달된 액션
• 전달된 액션에 의해 변경되기 전의 상태
• 전달된 액션에 의해 변경된 후의 상태

redux-thunk 미들웨어

리듀서는 비동기 처리 코드를 배치하지 않는다. 왜냐하면 리듀서는 상태를 변경하는 기능만을 작성해야 하며, 순수 함수여야 하기 때문이다. redux-thunk는 액션 대신에 thunk라는 함수를 전달(dispatch)하도록 하여 비동기 처리를 수행하는 기능을 제공하는 미들웨어이다. 지연된 연산을 실행하기 위해 표현식으로 만든 함수라고 할 수 있다.

1. dispatch(action)이 호출되면서 스토어로 액션이 전달.
2. redux-thunk 미들웨어를 거치면서 전달된 액션이 thunk 형태의 함수인지를 확인.
3. 이때 thunk라면 thunk() 함수 내부에서 비동기 처리 코드를 실행, 이 과정에서 상태를 변경할 수 있는 액션을 전달.

• 이 함수 내부에서 비동기 처리가 시작되었음을 나타내기 위한 상태 변경 액션을 전달(dispatch)
• 비동기 처리가 완려되면 처리 결과를 화면에 나타내기 위한 상태 변경 액션을 전달(dispatch)

4. thunk가 아니라면 next(action)을 호출해 리듀서가 새로운 상태를 만들어내도록 한다.

createAsyncThunk() 사용 방법

const asyncAction = createAsyncThunk("액션명", asnyc (arg, thunkAPI) => {
  // arg는 비동기 처리할 때 필요한 아규먼트
  // 비동기 처리 후 마지막에 리턴 하는 값이 최종적으로 완료했을 때 전달하는 action의 페이로드가 된다.
  return payload
})

createAsyncThunk 툴킷 함수의 특징은 시점별로 직접 dispatch(action) 하지 않아도 된다는 것.
리턴 받은 함수의 이름이 asyncAction 이고 액션명이 searchPerson으로 지정했다면 각 시점의 액션 생성자 함수와 액션이 사용하는 액션명은 아래와 같다.

시점	액션명	액션 생성자 함수
비동기 작업 시작	searchPerson/pending	asyncAction.pending
비동기 작업 완료	searchPerson/fulfilled	asyncAction.fulfilled
비동기 작업 실패	searchPerson/rejected	asyncAction.rejected

createAsyncThunk() 람수에 전달되는 두 번째 인자인 payloadCreator 함수는 Promise 기반이므로 async/await이나 Promise 기반으로 작성해야 한다.

백엔드 API 요청 redux-thunk와 axios 사용하기