프론트엔드 상태
프로세스
- 각 값을 분류합니다: 지속적인 서버 데이터, 공유 가능한 URL/탐색 상태, 폼 초안, 또는 임시 프레젠테이션 상태. 하나의 권위 있는 소유자를 선택합니다.
- 설치된 상태/데이터 가져오기(state/data-fetching) 도구를 재사용합니다. 로컬 상태는 소비자(consumer) 근처에 두고, 구체적인 조정(coordination) 필요가 있을 때만 공유 상태를 도입합니다.
- 모든 쿼리 및 권한 차원에 따라 서버 캐시를 키(key)로 지정합니다. 로그아웃, 테넌트 전환 및 ID 변경 시 캐시를 지우거나 격리합니다.
- 로딩, 빈 상태, 오류 및 성공 상태를 명시적으로 모델링합니다. 동시 요청의 경우 취소(cancellation)로 작업을 줄일 수 있지만, 결과 수용을 보호하여 오래된 응답이 새로운 의도를 덮어쓰지 않도록 합니다.
- 낙관적 변이(optimistic mutation)의 경우 서버와 조정하고 실패 동작을 정의합니다. 롤백(rollback)은 더 새로운 성공적인 변이를 지워서는 안 됩니다. 작업을 추적하거나 라이브러리에서 지원하는 동시성 패턴을 사용합니다.
- 뒤로/앞으로 탐색, 재시도, 빠른 입력 변경, 실패한 변이 및 계정 전환을 확인합니다.
예제
A를 검색한 다음 B를 검색하면 B가 먼저 반환되고 A는 나중에 반환됩니다. 표시된 결과는 B로 유지되며, URL은 응답 완료 순서가 아닌 현재 검색을 반영합니다.
중단 조건
로컬 경쟁 문제를 해결하기 위해 상태 라이브러리를 교체하지 마십시오. 동일한 서버 값을 독립적인 전역 저장소에 중복 저장하면 동기화 의무가 발생합니다.
증거
- 상태 소유권 맵 및 캐시 키.
- 경쟁/롤백/세션 전환 검사.
- 가시적인 로딩 및 복구 동작.
참고
react-state-management를 검토한 후 독립적으로 작성된 워크플로입니다.