처음 만난 리덕스 (Redux) 문서
10.5 Redux Async Data Flow
지금까지는 Redux에서 middleware를 사용해서 비동기 작업들을 처리하는 방법에 대해서 배웠습니다.
그렇다면 실제로 이런 비동기 작업들이 처리되는 과정에서 데이터의 흐름은 어떻게 될까요?
지금부터는 Redux에서 비동기 작업을 처리할 때 실제 데이터의 흐름에 대해서 배워보도록 하겠습니다.
- 비동기 작업을 요청하는 Action Dispatch (Requested)
- middleware에서 비동기 작업 처리
- middleware에서 비동기 작업 완료
- 성공한 경우 성공 Action Dispatch (Succeeded 또는 Fulfilled)
- 실패한 경우 실패 Action Dispatch (Failed 또는 Rejected)
- Store의 State 업데이트
이 순서는 Redux에서 비동기 작업의 데이터가 처리되는 흐름을 나타낸 것입니다.
먼저 첫 번째로 비동기 작업을 요청하는 Action이 Dispatch됩니다.
사용자가 버튼을 클릭하는 등의 UI 변화로 인해서 발생할 수도 있고, 직접 action을 dispatch 하는 경우도 있을 수 있겠죠.
이 때 Action Type에는 보통 요청한다는 의미의 Requested라는 단어를 사용합니다.
그리고 다음으로는 이렇게 dispatch된 action을 middleware에서 처리하게 됩니다.
여기에서의 Action은 비동기 작업을 요청하는 Action이기 때문에, 앞에서 만든 Async Function Middleware와 비슷한 형태로 처리된다고 보면 됩니다.
세 번째로는 middleware에서 비동기 작업이 완료되면 완료 Action을 Dispatch합니다.
예를 들면 서버로부터 데이터를 받아오는 비동기 작업의 경우, 서버에서 받아온 데이터와 함께 완료 Action을 Dispatch하는 것이죠.
하지만 서버에서 데이터를 받아오는 것이 항상 성공할 수만은 없기 때문에, 일반적으로 비동기 작업의 성공여부에 따라서 다른 Action을 Dispatch하도록 구현합니다.
성공한 경우의 Action Type에는 Succeeded 또는 Fulfilled라는 단어를 사용하고,
실패한 경우의 Action Type에는 Failed 또는 Rejected라는 단어를 사용합니다.
그리고 마지막 네 번째 단계에서는, 이 비동기 작업 완료 Action을 처리하는 Reducer를 통해서 Redux Store의 state를 업데이트 하게 됩니다.
이러한 일련의 과정을 통해서 Redux에서 비동기 작업이 처리된다고 보면 됩니다.
글로만 보면 이해가 잘 되지 않으니, 이번에는 그림을 통해서 전체 과정을 한 번 살펴보겠습니다.
https://redux.js.org/tutorials/fundamentals/part-6-async-logic#redux-async-data-flow
먼저 사용자가 UI에서 Deposit 버튼을 눌러서 비동기 작업을 요청하는 Action이 발생하고 Dispatch됩니다.
여기서 Action에 써진 Thunk는 다음 강의에서 배울텐데, 일단 지금은 앞에 나온 Async Function이라고 생각하면 됩니다.
그리고 이렇게 전달된 Action은 middleware에서 처리되는데, 여기에서는 서버에 API 요청을 하게 됩니다.
그리고 일정 시간이 지나서 서버로부터 응답이 오면, 서버에서 받은 데이터와 함께 비동기 작업 완료 Action을 Dispatch 합니다.
이후 비동기 작업 완료 Action을 처리하는 Reducer를 통해서 Redux Store의 state를 업데이트 하게 되고, 업데이트 된 데이터는 실제 UI에 반영됩니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.