2016-06-14 4 views
2

첫 번째 Reux Redux 전자 상거래 응용 프로그램을 작성 중이며 모범 사례가 무엇인지 궁금합니다. 모든 데이터를 다운로드하거나 서버 쪽 페이지 매김을 사용해야합니까? 사용자가 경로 "/ products"로 들어가면 상태가 제품을 가지고 있는지 확인한 후 제품을 가져옵니다.모든 데이터를 다운로드하거나 필요에 따라 요청해야합니까?

componentDidMount(){ 
    if(this.props.products.length <= 0){ 
     var token = this.props.auth.token; 
     this.props.actions.getProducts(token); 
    } 
} 

그러나 모든 제품 (1,000)을 다운로드하여 상점에 저장하거나 필요에 따라 요청해야하는지 잘 모르겠습니다. 예 : 100 개의 제품을 다운로드하고 모든 페이지를 가져오고 사용자가 다음 100을 보려는 경우 서버에서 다음 100 개의 제품을 가져옵니다.

다른 형태의 다른 부분에서도이 제품을 사용하게 될 것입니다.

당신은 어떻게 생각하십니까?

답변

3

둘 모두 유효한 방법입니다. 귀하의 케이스에 대한 "올바른"정보는 주로 검색되는 정보의 유형에 달려 있습니다.

예를 들어 정보의 작은 목록 인 경우 모든 정보를 한꺼번에 검색하여 작업 속도를 높이는 것이 좋습니다.

그러나 잠재적으로 긴 목록을로드하거나 정보가 "무겁다"(많은 필드 또는 큰 텍스트) 인 경우 클라이언트 리소스를 모두 이와 같이 사용하지 않는 것이 좋습니다. 하나의 불쾌한 페이지로 인해 네트워크와 메모리가 삼킨 것을 좋아하지 않습니다.

데이터를 알 수는 없지만 천 가지 제품이 조금 비싸 보입니다. 내 조언은 : 요청의 크기를 측정하고 한 번에 모든 것을로드 할 가치가 있는지 여부를 결정합니다.

+0

내가 한 번에 추가 제품의 최대 숫자해야 하는가? – user3527318

+0

제품은 몇 바이트입니까? 예상되는 제품 수를 곱해서 json (?) 오버 헤드를 추가하면 예상되는 예상 크기에 도달하게됩니다. 그런 다음 사용자가 크기를 수용 할 수 있는지 스스로에게 질문하십시오. 나는이 질문에 정말로 대답 할 수 없다. 그러나 약간의 긴장을 풀고, 결정을 내리고 계속 나아가십시오. 나중에 마음을 바꿀 수 있다는 것을 알고 있습니다 (맞습니까?). –

+0

좋은 소리 네! – user3527318

0

사용 서버로부터의 데이터를 얻는 처리하는 서버 측 페이징고차 성분. 릴레이 및 그래프을 확인하면 앱에서 데이터를 다시 생각하게됩니다. 좋은도 구현 아래 예를 들어 검사의 repo

4. https://github.com/emmenko/redux-react-router-async-example