Question

在我的数据库中，我存储了超过1,000,000个项目。当我想在React App中显示它们时，我使用一个简单的组件从数据库中获取前100个项目，将它们存储在Redux Store中并显示在列表中（它使用react-virtualized在DOM中保留一些项目）。当用户向下滚动并显示项目50（例如）时，组件将从数据库中提取接下来的100个项目，并将它们再次存储在Redux存储中。此时，我的Redux商店中存储了200个项目。当向下滚动过程继续进行时，它会到达Redux商店保留很多物品的地步：

ItemsActions.js

const fetchItems = (start=0, limit=100) => dispatch => {
  dispatch(fetchItemsBegin())
  api.get(`items?_start=${start}&_limit=${limit}`).then(
    res => {
      dispatch(fetchItemsSuccess(res.data))
    },
    error => {
      dispatch(fetchItemsError(error))
    }
  )
}

const fetchItemsBegin = () => {
  return {
    type: FETCH_ITEMS_BEGIN
  }
}

const fetchItemsSuccess = items => {
  return {
    type: FETCH_ITEMS_SUCCESS,
    payload: {
      items
    }
  }

}

MyComponent.jsx 状态= { currentIndex：0， currentLimit：100 }

const mapStateToProps = ({ items }) => ({
  data: Object.values(items.byId)
})

const mapDispatchToProps = dispatch => ({
  fetchItems: (...args) => dispatch(fetchItems(...args)),
})

componentDidMount() {
  this.props.fetchItems(0,100)
}

onScroll(index) {
  ...
  if (currentIndex > currentLimit - 50) {
    this.props.fetchItem([newIndex],100)
  }
}

render() {
  return (
     this.props.data.map(...)
  )
}

第一个问题：

是否需要将所有项目存储在Redux中？如果显示的列表的当前索引为300,000，那么Redux Store中应该有300,000项商品吗？还是应该存储显示的200个项目？我该如何处理reducer文件中的FETCH_ITEMS_SUCCESS操作？

ItemsReducer.js

  case FETCH_ITEMS_SUCCESS: 
    return {
      ...state, ????
      ...action.payload.items.reduce((acc, item) => ({
        ...acc,
        [item.id]: item
      }), {})
    }

第二个问题：

在同一组件中，我还有一个过滤器部分来显示满足指示条件的项目。我在DOM中只有几个项目处于活动状态，根据第一个问题，Redux Store中还有其他项目，但是必须将过滤器应用于数据库中存储的1,000,000个项目。我如何处理这种情况？

结论

我不知道应该如何处理后端存储的大量项目。在每种情况下，Redux存储应该有多少个商品？

谢谢。

React / Redux-获取和过滤大量数据

0 个答案: