UI를 걸지 않고 React-Redux에서 실시간으로 데이터를 보내는 방법은 무엇입니까?

Question

나는 react-redux에서 새로운입니다.

시나리오 : 많은 텍스트 필드가있는 양식이 있습니다. 내가 필드에 값을 입력 할 때, 다음과 같은 과정이 일어난다 : =>행동 =>REDUX라는 상태 업데이트 socket.on

필드 값 =>socket.emit 데이터 =>을 =>ui 업데이트

저장 버튼이 없습니다.

문제는입니다. 이것은 redux 상태에서 단일 값을 업데이트하는 데 긴주기라고 느낍니다.

UI가 렌더링을 다시 수행하면 양식이 2 ~ 3 초 동안 중단됩니다. 따라서이 시간 간격의 다른 필드에는 값을 입력 할 수 없습니다.

실시간 데이터를 보내는 동안 내 UI를 업데이트하는 짧은 방법이나 최적화가 없습니까?

Answer 1

코드를 보지 않으면 정확한 변경을 제안하기가 어려울 수 있습니다. 그러나 그때조차도 여기에 간다.

1. 사용 state는 즉시 변경 사항을 저장하는 모든 텍스트 필드는 state 필드 (JSON 개체)에 바인딩해야하는 텍스트 필드의 각의에 onChange 핸들러에 의해 업데이트 될 것이다. 이 state 필드는 양식에 전달 된 props의 초기 양식 데이터를 수신해야합니다.
2. 변경 내용의 발생 여부를 결정하기 위해 state 필드를 초기 데이터와 비교하십시오. state 필드와 초기 데이터가 props으로 전달 된 필드를 비교하여 변경이 발생했는지 여부를 결정하십시오.
3. redux 상태를 업데이트하는 호출을 지연 시키십시오. state 필드와 props 초기 상태가 다른 경우 lo-dash의 debounce과 같은 함수를 사용하여 설정된 간격 또는 페이지 탐색 이벤트에서 redux 상태를 업데이트하십시오.

이렇게하면 불필요한 리 렌더러가 발생하지 않도록 UI를 저장하고 UI가 멈추는 문제를 해결할 수 있습니다. 희망이 도움이!

Answer 2

동의; 여기서 낙관적 인 접근법을 취하여 구성 요소 상태 또는 응용 프로그램 상태에 로컬로 변형을 저장합니다.

들어오는 소품이 깊숙이 중첩되어 있지 않은 경우 rePrints와 currentProps의 얕은 비교를 통해 Re-rendering이 필요한지 여부를 결정하는 React.PureComponent를 사용할 수도 있습니다.