Redux: 캔트 상태가 변형되는 이유 ....

https://github.com/rackt/redux/issues/328

그것은 모두 예측 가능성과 신뢰성에 관한 것입니다.

redux의 감속기는 순수한 기능이므로 부작용이 없습니다. 이러한 기능에 대한 외부 상태를 살펴보기 시작하면 더 이상 순수하지 않습니다. 그리고 그들이 순수하지 않으면 신뢰할 수 없을 수 있습니다. 그리고 그로 인해 버그가 발생하며, 그 중 대부분은 추적하기가 매우 어려울 수 있습니다.

나는 순수한 함수를 작성함으로써 발견했고, 내 코드에서 오류가 적게 발생하고 더 생산적입니다. 그리고 핫 모듈 리로딩 (순수 기능을 사용하여 활성화 됨)은 그 생산성에 더해 터보 차저입니다.

그리고 당신은 매우 편리한 시간 여행과 같은 무료 기능을받습니다.

# 328의 중복으로 닫습니다.

명확하게하기 위해 : 상태는 모든 작업에서 깊이 복제되지 않습니다. 변경된 부분 만 복제됩니다 (다시 한 번 깊이가 아니라 변경된 내용에 따라 다름). 예를 들어, TodoMVC 앱에서 할일이 편집되면 해당 할일 객체 만 복제됩니다. 나머지 할일 개체는 동일합니다. 물론 새 객체를 가리키는 루트 새 할 일 목록 배열이 생성되지만 객체 자체는 변경되지 않은 경우 복제되지 않습니다. 따라서 보이는 것만 큼 비싸지 않습니다. 또한 비용이 많이들 때 (예 : 빠른 배열 변경) 구조적 공유 덕분에 매우 빠른 복사가 가능한 Immutable.js와 같은 라이브러리를 사용할 수 있습니다. Immutable.js를 사용하면 메모리의 큰 덩어리가 재사용되기 때문에 큰 배열도 복사하는 것이 그렇게 비싸지 않습니다. 마지막으로, Immutable.js의 유무에 관계없이 불변성은 개체가 변경되지 않았기 때문에 _ 정확하게 _ 변경된 내용을 알고 있기 때문에 앱을 효율적으로 다시 렌더링하는 데 도움이됩니다.

Ahh .... 이제 마지막 비트가 의미가 있음을 확인하십시오 ... 이로써 구성 요소 렌더링 변경으로 인해 변경된 상태로 인해 반응 diff / redraw 엔진이 결과적으로 더 빠르다고 가정합니다. shouldComponentUpdate와 비슷합니다.

나는 이것에 의해 당신이 어떤 상태로만 변경된 컴포넌트 렌더 변경 때문에 반응 diff / redraw 엔진이 결과적으로 더 빠르다고 가정한다고 가정합니다. shouldComponentUpdate와 비슷합니다.

정확히 react-redux 는 불변성 보장 덕분에 공격적인 shouldComponentUpdate 를 사용합니다.

@gaearon 이 하나를 조금

또한 비용이 많이들 때 (예 : 빠른 배열 변경) 구조적 공유 덕분에 매우 빠른 복사가 가능한 Immutable.js와 같은 라이브러리를 사용할 수 있습니다.

저는 redux를 사용하여 최대 8000 개 위치로 올라가는 어레이에 대한 업데이트를 처리하고 있으며 처리량이 100ms 당 10-100 개의 변경 영역에있을 것으로 예상합니다. redux를 사용하여 상태를 관리하기 위해 패배하는 싸움을하고 있습니까?
DOM이 아닌 캔버스를 통해 상태를 표현할 계획이지만, 경험상 업데이트 빈도가 문제를 일으키는 지 여부를 이해하고 싶습니다.

@dougajmcdonald : 첫 번째 질문은 그 작업을 어떤 식 으로든 일괄 처리 할 수 ​​있다는 것입니다. 각 개별 업데이트를 UI의 별도 다시 그리기로 표현해야하나요?

그 외에도 Redux 관련 성능에 대한 다음 리소스를 살펴볼 것을 제안합니다.

• 성능 및 확장 , 구독 알림 최소화 및 선택기 사용에 대한 Redux FAQ 항목
• My post Practical Redux, Part 6 : Connected Lists, Forms, and Performance
• 내 React / Redux 링크 목록 의 Redux 성능 섹션

나는 또한 Reactiflux 채팅 채널 에서 이것에 대해 더 많이 기쁩니다 .

@markerikson 불행히도 그렇습니다. 게임의 개념에는 비교적 큰 데이터 구조에 대한 많은 빠른 업데이트가 포함됩니다.
10-100 개의 변경 사항이 모두 다시 그리기를 트리거하지는 않습니다. 10-100 변경은 100ms 당 단일 다시 그리기로 표시되는 상태 변경입니다.
그래서 제 질문은 실제로 업데이트를 100ms 당 10-100 개의 상태 변경으로 일괄 처리하면 redux 내의 상태 관리가 100ms의 에스크 한 창 내에서 현명하게 완료되는 방식으로이를 효과적으로 처리 할 수 ​​있을까요? 뒤처지기 시작하지 않고 다시 그릴 수 있습니다.
상태 업데이트는 기본적으로 크기가 8000 인 배열에서 3-4 개의 속성을 변경하는 것을 포함하므로 다음 중 하나를 변경하여 ms 당 1-10 번 새 배열을 만드는 것에 대해 이야기 할 것입니다 (불변으로 유지하고 싶다고 가정). 배열 인덱스 내의 개체. 개체가 매우 작습니다 (3-4 개의 속성, 몇 개의 숫자 및 몇 개의 작은 문자열).

이것이 Dan이 제안한 것처럼 불변성을 사용하는 것이 가능한 한 많은 어레이를 재사용 할 수 있다면 성능을 향상시킬 수 있다고 생각했던 이유입니다.

@dougajmcdonald : 음, "Redux의 상태 관리"는 실제로 _ 당신이 제공 한 하나의 루트 감속기 함수일뿐입니다. :)

Immutable.js는 마술 성능을 향상시키는 은색 총알이 아닙니다. 어떤 것은 더 빨리 만들고 다른 것은 더 느리게 만들 수 있습니다. Immutable.js 관련 성능 고려 사항에 대한 여러 기사 가 있습니다.

솔직히 말해서, 사용 사례를 감안할 때 이론상 원할 경우 직접 변형을 더 많이 _ 할 수 있습니다 _. 필자의 게시물 Idiomatic Redux, Part 1-Implementation and Intent 에 따르면 Redux 코어 자체는 실제로 변이에 대해 전혀 신경 쓰지 않습니다. 주로 DevTools뿐만 아니라 React-Redux UI 레이어도 마찬가지입니다. 이제 돌연변이는 Redux를 사용하려는 의도가 아니지만 가능합니다.

제 개인적인 조언은 간단하게 시작하라는 것입니다. 일반 JS 객체와 배열을 사용하십시오. "직접"또는 사용 가능한 많은 불변 업데이트 유틸리티 라이브러리 중 하나를 사용하여

그런 다음 여기에서 일괄 처리, 디스패치 감소, 논리 업데이트 등의 추가 최적화 작업을 수행 할 수 있습니다.

@markerikson 미묘한 찍혔 습니다! : p 맞아요. 현재 상황의 감속기 측면은 기본적으로 상당히 큰 배열의 생성 및 파괴이지만 실제 문제는 최종 목표가 될 때 반응 구성 요소 수명주기 비트 및 봅슬레이 일 가능성이 더 높다고 생각합니다. 60ish FPS로 이상적으로 렌더링되는 캔버스 요소.
불변에 대한 요점과 직접 변이에 대한 요점에 감사드립니다. 나는 조금 읽고 이것들도 고려할 것입니다.
현재 내 생각 프로세스는 캔버스에서 redux 상태를 분리하고 더 많은 움직이는 부분과 함께 pub / sub (이미 연결 한 방식)를 통해 메시지를 전달하는 것입니다.

다음에서 변경할 생각입니다.
pubsub> dispatch ()> reducer> redux state> react component stuff> canvas render.

에:
pubsub> 로컬 구성 요소 상태> 캔버스 렌더링

앱의 캔버스 부분이 아닌 나머지 UI에는 여전히 redux를 사용할 것입니다.

귀하의 질문은 완전히 유효합니다. 실제로 vuex라는 redux의 vuejs 구현은 변이의 개념으로 작동합니다. 따라서 '감소 자'는 사실 돌연변이라고 불리며 중앙화 된 장소에서 상태를 수정하는 한 모든 것이 정상이어야합니다. 이것은 vue가 앱의 상태에 관찰자 및 기타 항목을 추가하기 때문에 발생하므로 언급했듯이 객체를 교체하는 것보다 수정하는 것이 vue의 cae에서 더 합리적입니다. Redux는 불변이며 결국 두 접근 방식의 성능은 VS vue 가상 DOM 업데이트에 반응하여 모든 경우에 하나가 다른 것보다 낫다고 말할 수없는 시점에서 거의 동일합니다.