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.