redux를 사용하는 무한 스크롤

Question

상태 관리를 위해 Redux를 사용하는 반응 기반 애플리케이션에서 무한 스크롤을 구현하려고합니다. 페이지 스크롤에 작업을 전달하려고합니다. 그러나 같은 것을 성취 할 수는 없습니다. 내 코드는 여기

// The Reducer Function 
const pinterestReducer = function (state=[], action) { 
    if (action.type === 'SET_CONTENT') { 
     state = action.payload; 
    } 
    return state; 
} 

const appReducer = combineReducers({ 
    pinterest: pinterestReducer 
}) 

// Create a store by passing in the pinterestReducer 
var store = createStore(appReducer); 
window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
     // you're at the bottom of the page, show all data 
store.dispatch({ 
    type: 'SET_CONTENT', 
    payload: travelJSON 
}); 
    } 
}; 

travelJSON은 객체의 배열입니다. 처음에는 travelJSON의 처음 12 개 객체를 상태로 지정하는 액션을 전달합니다. 사용자가 스크롤은 페이지 하단에 나는 전체 JSON을 할당해야하는 경우 다음이 상태의 내 구성 요소를 만들고 사용은 다음과 같습니다

// Dispatch our first action to change the state 
store.dispatch({ 
    type: 'SET_CONTENT', 
    payload: travelJSON.slice(0,12) 
}); 
    render(
     <Provider store={store}><Pinterest /></Provider>, 
     document.getElementById('page-container')); 

Answer 1

다음 코드는 스크롤 당신

travelJSON.splice(0,12) 

travelJSON

에서 처음 12 개 항목을 제거 처음 12 개 항목을 나머지 항목으로 바꾸십시오. 대신 실제로 항목을 바꾸지 말고 추가하십시오.

return [...state, ...action.payload]; 

(이 새로운 확산 연산자를 사용합니다 : https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator) 당신이이 일을하려고하는 이유가 의문을 제기 할

Answer 2

을

state = action.payload 

은 다음과 같이 귀하의 주 사용 무언가에 항목을 추가하려면 모델/비즈니스 로직 레이어. 일반적으로 스크롤을 가상화하는 것은 뷰 상태에 대한 우려입니다. 뷰 구성 요소에 모델 객체의 전체 목록을 제공하지만 뷰 구성 요소의 뷰포트에 표시되는 객체의 DOM 요소 만 렌더링합니다.

이 작업을 수행하는 한 가지 방법은 모델 개체 하나 하나를 표시 할 수있을만큼 큰 div를 할당하는 구성 요소를 만드는 것입니다. render 메서드는 뷰포트에 표시되는 항목 만 렌더링합니다.

이미이 작업을 수행하는 많은 구성 요소가 있습니다. 예를 들어 https://github.com/developerdizzle/react-virtual-list을 참조하십시오. 이것은 HOC로 구현되므로 최소한의 변경만으로 현재보기 논리로 구현할 수 있습니다.

구성 요소를 래핑합니다. 전체 데이터 배열을 래퍼에 보내고 뷰포트에 표시 할 요소를 확인한 다음 래핑 된 구성 요소로 전달하고 현재를 고려하여 뷰포트로 요소를 이동하는 데 필요한 'paddingTop'스타일로 전달합니다 스크롤 위치.

Answer 3

react waypoint을 보았습니까? 당신이하려고하는 것을 정확히 성취하는 것이 좋은 구성 요소 인 것 같습니까?