還元と反応を使用した無限スクロール

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

travelJSON.splice(0,12) 

から最初の12の項目を削除最初の12個のアイテムを残りのアイテムに置き換えてください。実際にそれらを置き換えるのではなく、実際に追加する必要があります。あなたがこの中をやろうとしている理由私は疑問です

Answer 2

state = action.payload 

あなたの状態での使用には、このような項目を追加するには：

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

を（https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operatorこれは新しいスプレッド演算子を使用しています）モデル/ビジネスロジックレイヤー。通常、スクロールを仮想化することは、ビューの状態に関する懸案事項です。ビューコンポーネントにモデルオブジェクトのリスト全体を渡しますが、ビューコンポーネントのビューポートに表示されるオブジェクトのDOM要素のみをレンダリングします。

これを行う1つの方法は、モデルオブジェクトのすべてを表示するのに十分な背の高いdivを割り当てるコンポーネントを作成することです。 renderメソッドは、ビューポートに表示されるアイテムのみをレンダリングします。

あなたのためにこれを行うためのコンポーネントがたくさんあります。たとえば、https://github.com/developerdizzle/react-virtual-listを参照してください。これはHOCとして実装されているため、現在のビューロジックで最小限の変更で実装できます。

コンポーネントをラップします。データ配列全体をラッパーに送り、どの要素がビューポートに表示され、ラップされたコンポーネントに渡されるかを把握し、現在の要素を考慮してビューポートに要素をシフトするのに必要な 'paddingTop'スタイルで渡しますスクロール位置。

Answer 3

あなたはreact waypointを見ましたか？あなたがしようとしていることを正確に達成するには、素晴らしい要素のようです。