React Flux 앱에서 데이터를 상점 및 구성 요소에 복제하지 않습니까?

Question

Flux를 기반으로하는 프로젝트를 시작하고 있지만, 저를 괴롭히는 것을 발견했습니다.

게임의 목록이 있다고 가정 해 봅시다. Games 스토어와 해당 상점을 청취하는 구성 요소 인 HomepageGames이 있습니다.

그래서 앱이로드되면 서버에서 게임을 가져 와서 저장소에 저장하고 React 구성 요소는 게임을 상태로 저장합니다. 그래서 두 곳에서 게임을 할게요.

하지만 ... 게임은 수백 ... 수백입니다.

또한 - 나는 머리글과 바닥 글이라는 두 가지 탐색을 끌어 당기고있는 URL 목록을 가지고 있습니다. 따라서 URL은 Navigation 스토어와 두 개의 네비게이션 리액션 구성 요소 세 위치에 있습니다.

그리고 링크도 수백 수 있습니다 ... 그래서

, 어떻게 복부 팽만이 메모리를 방지합니까 ...? 아니면 화해해야할까요?

Answer 1

스토어에서 목록을 가져 오는 경우 실제로 스토어에서 게임 목록을 복제하지 않습니다. Javascript를 사용하면 기본적으로 구성 요소에이 목록에 대한 참조가 제공됩니다. 당신이 HomepageGames에서이 작업을 수행 할 경우

그래서 :

componentDidMount: function() { 
    this.setState({ 
     games: GameStore.getAllGames() 
    }); 
} 

당신은 여전히 ​​메모리에 게임을 하나 개의 목록이있을 것이다.

구성 요소에 GamesStore의 목록에 대한 참조가 있습니다. 구성 요소에있는이 목록에 게임을 추가하려고하면 스토어에서도 목록이 변경됩니다.

대부분의 경우 이는 바람직하지 않은 동작입니다. 많은 사람들이이 참조를 피하기 위해 Immutable과 같은 라이브러리를 사용합니다. 그러나 당신에게 이것은 좋은 생각 인 것 같습니다.