릴레이를 사용할 때 로컬 상태를 어떻게 처리합니까?
리액트/릴레이 기반의 콘텐츠 관리 시스템을 개발하고 있습니다.사용자는 서버에 저장된 문서를 작성 및 수정할 수 있습니다.서버에 저장하기 전에 수정된 상태의 기사를 처리하는 것이 가장 좋은 방법인지 궁금합니다.이 문제를 해결하기 위한 몇 가지 다른 방법을 생각할 수 있습니다.
1) 제어되지 않은 입력
할 수 .defaultValue
아무데도 명시적으로 상태를 저장하지 않도록 해야 합니다.DOM을 사용하다사용자가 "저장"을 누르면 모든 필드를 수집하여 값을 읽고 변환을 만듭니다.
장점:
- 로컬 상태 처리 없음
콘트라:
- 어떤 필드가 변경되었는지 알 수 없으며 모든 데이터를 변환으로 전송해야 합니다.또는 diff를 작성하려면 추가 로직이 필요합니다.
- 상태 변경에 따라 보기의 다른 부분을 업데이트할 수 없습니다.
2) 로컬 상태에서 복사:
수정된 기사를 React 컴포넌트의 로컬 상태로 유지하고 제어된 입력 필드를 사용하여 동기화할 수 있습니다.
장점:
- 로컬 상태는 필드만 변경할 수 있으므로 쉽게 구분할 수 있습니다.
- UI의 다른 부분은 로컬 상태의 변경에 응답할 수 있습니다.
콘트라:
- 뷰내의 데이터는 릴레이로부터 직접 송신되지 않기 때문에, 이것은 일종의 안티 패턴이라고 생각됩니다.로컬 상태와 릴레이 소품 간의 동기화가 버그의 원인이 될 수 있습니다.
3) 서버가 새로운 로컬:
모든 변경에 대해 돌연변이를 생성하기만 하면 됩니다.또한 낙관적인 업데이트를 사용하여 양호한 UX를 제공할 수 있습니다.
장점:
- 릴레이는 데이터의 유일한 진실 소스입니다.
- 상태가 서버 측에 저장되므로 사용자가 실수로 브라우저를 닫았을 때 백업이 있습니다.
콘트라:
- 이를 위해서는 사용자가 초안 등을 폐기하는 경우를 처리하기 위해 서버 측에서 보다 복잡한 구현이 필요합니다.
- 많은 돌연변이가 트리거됨
제가 생각할 수 있는 문제 해결 방법은 세 가지가 있지만, 어쩌면 더 나은 해결 방법이 있을지도 모릅니다.
Relay를 사용한 로컬 상태 처리 방법에 대해 많은 논의가 이루어지고 있으며, 향후 Relay 버전이 내장된 솔루션이 나올 수도 있지만, 현재 버전의 Relay와 연동되는 솔루션이 필요합니다.
간단한 답변:상황에 따라 다르겠지만, 저는 2번 솔루션을 선호합니다.
1. 2번을 선호하는 이유
솔루션 #2는 솔루션 #1의 고급 버전이기 때문에 #1이 통과되었습니다.하지만 1위는 물론 그렇습니다.대부분의 오래된 사이트들은 그렇게 하고 있습니다.
솔루션 #3은 서버를 계속 사용하므로 서버 비용이 증가하거나 비즈니스 확장에 따라 사용자 환경이 느려집니다.따라서 #3이 통과되었습니다.그러나 내부 시스템이나 사용자 수가 적은 비즈니스에서는 3번이 적합합니다.
사용자가 실수로 브라우저를 닫았을 경우
는 아직할 수 .여러분도 이미 을 사용법auto save in xx seconds
。도 있습니다.지연이 도 모두 됩니다.또는 로컬 스토리지를 사용하면 컴퓨터 간에 저장되지 않지만 변경 내용을 모두 저장할 수 있습니다. 동기화 지연이 없는 모든 기록도 저장할 수 있습니다.
2. 안티패턴이 아니다
로컬 상태와 릴레이 소품 간의 동기화가 버그의 원인이 될 수 있습니다.
다른 사람이 동시에 기사를 변경할 경우, 이것은 #2에만 해당되지 않는다고 말해야 합니다.
#1의 경우 수정 내용이 덮어쓰기되어 수정 내용이 어디로 갔는지 알 수 없습니다.
#3의 경우, 컨텐츠가 항상 변화하고 있습니다만, 계속 작업해 주실 수 있습니까?
그럴 경우 버전 관리 로직을 추가해야 하는 거죠?그렇지 않은 경우 로컬 상태는 단일 진실입니다.
제가 틀렸다면 정정해 주세요.두 가지 문제가 있다고 생각합니다.로컬 상태의 저장 장소에 대해 논의하고 있습니다만, 실제로는 두 사람이 상충하는 변경을 하는 문제에 대해 걱정하고 있습니다(예를 들어 현재 사용자가 편집하고 있는 것과 같은 문서를 다른 사람이 편집하고 있는 경우).그 이유는 Relay 소품 변경에 대해 이야기하고 있기 때문이라고 생각합니다.이것은, 앱이 서버로부터 업데이트를 적극적으로 취득하고 있는 경우, 그러한 업데이트를 취득하고 있는 경우에 한정됩니다.
뷰내의 데이터는 릴레이로부터 직접 송신되지 않기 때문에, 이것은 일종의 안티 패턴이라고 생각됩니다.로컬 상태와 릴레이 소품 간의 동기화가 버그의 원인이 될 수 있습니다.
릴레이 애플리케이션은 사용자가 동기화하지 않으면 서버와 항상 동기화되지 않습니다.릴레이 쿼리와 컴포넌트에 전달된 소품이 지속적으로 업데이트되지 않습니다.충돌이 발생할 가능성이 있는 경우 릴레이 문제가 아닌 문제를 해결해야 하며 로컬 상태를 저장해도 문제가 해결되지 않습니다.
충돌을 처리하는 가장 간단한 방법은 다음과 같습니다.
- 로컬 상태에 옵션 #2 사용
- 편집하기 위해 문서를 다운로드할 때 가져오는 자동 증분 버전 번호를 모든 문서에 부여합니다.
- 아티클 편집 변환을 요구하여 해당 아티클이 작동 중인 기본 버전 번호를 지정해야 합니다.서버는 현재 버전이 아닌 베이스를 가진 변환을 거부해야 합니다.변경 내용이 충돌하고 있으며 최신 버전에서 작동하지 않으며 저장할 수 없다고 사용자에게 알립니다.
WWIW 복잡한 릴레이 어플리케이션에서 일해왔고, 항상 #2에 의존해 왔습니다.로컬 리액트 상태는 양호하고 입력 제어는 양호합니다.안티패턴, 릴레이 등이 아닙니다.
언급URL : https://stackoverflow.com/questions/42728582/how-to-handle-local-state-when-using-relay
'programing' 카테고리의 다른 글
JSON의 문자열을 사용하여 10진수를 나타내는 이유는 무엇입니까? (0) | 2023.03.17 |
---|---|
.save()와 update()의 Mongoose 차이 (0) | 2023.03.17 |
Wordpress 사용자 지정 등록 양식 (0) | 2023.03.17 |
JSON 데이터를 javascript에 구문 분석 없이 동기적으로 포함하려면 어떻게 해야 합니까? (0) | 2023.03.17 |
ReactJs, 같은 파라미터로 setState를 호출한다. (0) | 2023.03.17 |