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个对象分配给state。当用户滚动到页面底部时，我必须分配完整的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

我会问你为什么要在模型/业务逻辑层中尝试这样做。通常，虚拟化滚动是视图状态问题。您为视图组件提供了整个模型对象列表，但它只呈现了将在视图组件的视口中显示的对象的DOM元素。

执行此操作的一种方法是创建一个分配div的组件，该div足够高以显示模型对象中的每一个。 render方法仅渲染将在视口中显示的项目。

有许多组件已经为您完成此操作。例如，请参阅：https://github.com/developerdizzle/react-virtual-list。这是作为HOC实现的，因此您可以使用当前视图逻辑以最小的更改实现它。

它包装你的组件。您将整个数据数组发送到包装器中，它会确定哪些元素将在视口中显示并将这些元素传递给包装组件，它还会传递到“填充顶部”中。考虑到当前滚动位置，将这些元素移动到视口中所需的样式。

Answer 2

以下代码从travelJSON

中删除前12项

travelJSON.splice(0,12)

滚动时，您将前12个项目替换为其余项目，而您应该添加它们而不是替换它们。

state = action.payload

要向您的州添加项目，请使用以下内容：

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

（这使用新的点差运算符：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator）

Answer 3

你看过react waypoint了吗？它似乎是一个很好的组件来完成你想要做的事情？

无限滚动使用redux并做出反应

3 个答案: