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

【问题标题】：Infinite scroll using redux and react使用 redux 无限滚动并做出反应
【发布时间】：2017-08-02 10:48:40
【问题描述】：

我正在尝试在使用 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'));

【问题讨论】：

您没有显示任何可以加载更多数据的代码。 travelJSON 是什么？
更新了问题。请看一看。

标签： javascript reactjs npm redux single-page-application

【解决方案1】：

以下代码从 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）

【讨论】：

@angular2 刚刚编辑了他的代码 - 我的解决方案是假设他使用拼接而不是切片

【解决方案2】：

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

一种方法是创建一个组件，该组件分配一个足够高的 div，以显示您的每个模型对象。 render 方法只渲染那些将在视口中显示的项目。

已经有许多组件可以为您执行此操作。例如：https://github.com/developerdizzle/react-virtual-list。这是作为 HOC 实现的，因此您可以使用当前的视图逻辑来实现它，只需进行最少的更改。

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

【讨论】：

【解决方案3】：

你看过react waypoint吗？这似乎是一个很好的组件来完成您正在尝试做的事情？

【讨论】：