javascript - solucionar - Desplazamiento infinito usando redux y reaccionar

void(0) javascript href

Question

Estoy tratando de implementar desplazamiento infinito en una aplicación basada en reacción que usa Redux para la administración del estado. Estoy tratando de despachar una acción en el desplazamiento de página. Pero no puede lograr lo mismo. Mi código está aquí

// 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 es una matriz de objetos. Inicialmente distribuyo una acción que asigna los primeros 12 objetos de travelJSON al estado. Cuando el usuario se desplaza al final de la página, tengo que asignar JSON completo. A continuación, mi componente hace uso de este estado:

// 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

El siguiente código elimina los primeros 12 elementos de travelJSON

travelJSON.splice(0,12)

en el desplazamiento, reemplaza los primeros 12 elementos con los elementos restantes, mientras que realmente debería agregarlos en lugar de reemplazarlos.

state = action.payload

Para agregar elementos a su estado, use algo como esto:

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

(Esto utiliza el nuevo operador de difusión: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator )

Answer 2

Me pregunto por qué estás tratando de hacer esto en la capa de lógica de modelo / negocio. Por lo general, la virtualización de un desplazamiento es una preocupación de estado de la vista. Le da al componente de vista toda la lista de objetos modelo, pero solo representa los elementos DOM que se mostrarán en la ventana gráfica del componente de vista.

Una forma de hacerlo es crear un componente que asigne un div que sea lo suficientemente alto para mostrar cada uno de los objetos de su modelo. El método de renderizado solo muestra aquellos elementos que se mostrarían en la ventana gráfica.

Hay varios componentes que ya lo hacen por usted. Ver por ejemplo: https://github.com/developerdizzle/react-virtual-list . Esto se implementa como HOC, por lo que podría implementarlo con su lógica de vista actual con cambios mínimos.

Envuelve tu componente. Envía toda la matriz de datos en el contenedor, y se da cuenta de qué elementos se mostrarán en la ventana gráfica y los pasa al componente envuelto, también pasa en el estilo ''paddingTop'' requerido para cambiar esos elementos a la ventana gráfica teniendo en cuenta la actual posición de desplazamiento