3

In my database I have more than 1,000,000 stored items. When I want showing them in my React App, I use a simple Component that fetch first 100 items from database, store them in Redux Store and display in the list (it uses react-virtualized to keep a few items in the DOM). When user scrolls down and the item 50 (for example) is visualized, the Component fetchs next 100 items from database and store them in Redux store again. At this point, I have 200 items stored in my Redux store. When the scroll down process continues, it gets to the point where the Redux store keeps a lot of items:

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 state = { 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(...)
  )
}

First Question:

Is necessary to store all items in Redux?? If current index of the list displayed is 300,000, should I have 300,000 items in Redux Store? or should I have stored the 200 displayed items? How I have to handle the FETCH_ITEMS_SUCCESS action in the reducer file?

ItemsReducer.js

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

Second Question:

In the same Component, I have also a filter section to display items which meet the indicated conditions. I have only a few items active in the DOM and, depending on first question, others items in Redux Store, but filters must be applied to 1,000,000 items stored in the database. How I handle this situation?

Conclusion

I don't know how I should handle a large amount of items stored in the backend. How many items should have the Redux store in each situation?

Thanks in advance.

Jose Ramos
  • 673
  • 3
  • 10
  • Did you learn anything since you posted this? This question is worded exactly as I would like to ask it. It seems to me you would run into memory problems. – user210757 Feb 07 '19 at 21:03
  • @user210757, I still don't have an exact answer to that question, although recently I've discovered react-admin, a fairly comprehensive framework for buildings React applications. This library uses Redux and I've seen the way to handle a lot of records in the store when I fetch a bunch of them with pagination. I think I will have a specify answer soon. – Jose Ramos Feb 08 '19 at 14:18
  • thanks wow that looks really good – user210757 Feb 08 '19 at 15:03
  • Regarding the second question, filtering can be done on the server side. So the API will return a filtered list – Ivan Ludvig Mar 12 '21 at 16:16

0 Answers0