reactjs, redux 및 페이지 매기기

나는 성분 배열을 제공하는 api 끝 점이 있습니다. 각 성분의 성질은 ID, 이름, 측정 단위, 밀도 (kg/lt), 비용/측정 단위입니다. 나는 수천 가지 성분을 가지고 있으며 계속 증가 할 수 있습니다.reactjs, redux 및 페이지 매기기

내 백엔드 서버에서 페이지 크기가 가변적 인 페이지 매김 된 API를 수신하고 있습니다. page 및 page_size 및 ingredients 내 상태 모양 w.r.t을 구성하는 방법을 클라이언트 사이트에

http://yoursite.com/api/ingredients?page=1&page_size=200

클라이언트 측에서는 페이지 당 15-20 개의 항목 만 표시하려고합니다. 따라서 항목이 페이지 매김을 통해 올바르게 표시되도록하는 방법.

마찬가지로 나는 성분이 더 많지 않습니다. 예 : 조리법, 사용자 및 기타.

이렇게 큰 데이터를 처리 할 수 있습니다.

출처

2017-11-16 Santhosh Yedidi

문제를 이해할 수 있는지 알 수 없습니다. 'page','page_size' 및'ingredients' 필드를 사용하여 주 (state)를 디자인하는 것이 잘못된 이유는 무엇입니까? '재료'는 그 순간에 보여지는 성분만을 포함 할 것입니다. –

그래서 각 페이지마다 성분을 별도의 개체 안에 저장해야합니다. git에 대한 예를 아십니까? –

클라이언트는 총 페이지 수를 어떻게 알 수 있습니까? –

귀하의 성분 응답은 다음과 같이 될 수있다 :

GET http://yoursite.com/api/ingredients?page=1&page_size=15 

{ 
    pages_count: 50, 
    page: 1, 
    ingredients: [ 
     //first 15 ingredients 
    ] 
}

귀하의 초기 응용 프로그램 상태는 다음과 같습니다

{ 
    pages_count: 50, 
    page: 1, 
    page_size: 15, 
    ingredients: [ 
     //first 15 ingredients 
    ] 
}

이 때 사용자 Page 2 버튼 (또는 Next Page, 또는 무엇이든)을 클릭, 당신은 비동기 파견 이와 같은 행동 :

const changePage = (page) => (dispatch) => { 
    doGet(`http://yoursite.com/api/ingredients?page=${page}&page_size=15`) 
     .then(res => { 
      dispatch(retrieveIngredients(res.ingredients, page)); 
     }); 
}

여기서 이

const retrieveIngredients = (ingredients, page) => { 
    return { 
     type: 'retrieve_ingredients', 
     ingredients, 
     page 
    }; 
}

그런 다음, retrieve_ingredients 조치를 처리하는 감속기가 자신의 상태를 업데이트 :

당신의 IngredientsList 구성 요소에서

{ 
    page: action.page, 
    ingredients: action.ingredients 
}

(또는 뭔가 유사한 것 같아요), 당신은 단지 표시됩니다는 액션 창조자이다 목록 state.ingredients. 또한 PageSelector에 1에서 state.pages_count 개의 페이지 버튼이 표시됩니다.

출처

2017-11-16 10:36:20

reactjs, redux 및 페이지 매기기

답변

관련 문제