TS · ZUSTAND
Zustand 비동기 액션 상태 전이
비동기 액션은 요청 시작, 성공, 실패가 같은 함수 안에서 상태로 표현됩니다. 이 전이를 명확히 하면 컴포넌트가 단순해집니다.
비동기 전이
async
idle
아직 요청하지 않았거나 이전 요청이 끝난 상태입니다.
loading
액션 시작 시 isLoading을 true로 바꿉니다.
success
응답 데이터를 store에 저장하고 error를 비웁니다.
error
실패 메시지를 저장하고 UI에 표시할 수 있게 합니다.
finally
성공/실패와 무관하게 loading을 끕니다.
idle
→
loading
→
success/error
→
finally
→
UI
구현 기준
state
중복 클릭 방지
loading 중 버튼을 막아 중복 요청을 줄입니다.
오류 표시
error 상태를 컴포넌트에서 공통으로 읽습니다.
낙관적 갱신
필요하면 성공 전에 UI를 먼저 바꾸고 실패 시 되돌립니다.
타입 설계
data, isLoading, error의 nullable 상태를 명확히 둡니다.