미들웨어란?

리덕스 미들에워는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다.

비동기 작업을 처리하는 미들웨어

여기에는 Redux-Thunk 와 Redux-Saga가 있습니다.
이번 포스터에선 Redux-Thunk를 살펴 보겠습니다.

Redux-Thunk

Redux는 기본적으로 액션객체만을 디스패치할 수 있습니다. 하지만 Redux Thunk를 활용하면 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다. 이러한 동작방식을 활용하여 Redux에서 비동기적인 프로그래밍을 구현할 수 있습니다.

Redux-Toolkit 에서 이런 Redux Thunk를 동작하도록 하는 내부 기능이 구현되어 있습니다.

createAsyncThunk를 사용하고 첫번째 인자에는 이름을
두번째 인자에는 액션 생성함수를 적습니다.

그 다음 이 asyncupFetch 함수를 createSlice의 extraReducers 부분에 적용을 시킵니다.

각각 pending, fulfilled, rejected 상태에 따라 state 값을 어떻게 변경 시킬지 작성 해 줍니다.

이런식으로 asyncUpFetch 함수를 가져와서 dispatch 시키고 싶은 곳에 적용시킵니다.