How to create infinite scroll in Flatlist with Redux?

Question

New to ReactNative and I'm trying to use flatlist with infinite scroll. However the issue it seems to re-render the whole entire list instead of only rendering new items to the bottom of the list. How to fix it?

  const ActsPreviewScreen = ({ navigation }) => {
  const dispatch = useDispatch()
  const fetchActsPreview = () => dispatch(getActsPreview(page))
  const [page, setPage] = useState(1)

  useEffect(() => {
    console.log('requestToServer')
    fetchActsPreview(page)
  }, [])

  const { actsPreview } = useSelector(state => ({
    ...state.act,
    attributes: { ...state.attributes },
  }))

  const handleLoadMore = () => {
    setPage(page + 1)
    console.log('loadmore')
    fetchActsPreview(page)
  }

return (
    <View>
      <View>
        <FlatList
          data={actsPreview}
          keyExtractor={item => item.id.toString()}
          renderItem={renderItem}
          onEndReached={handleLoadMore}
          onEndReachedThreshold={0.5}
        />
      </View>
    </View>
  )

Act Preview is an array of Acts. API gives / acts with an array of 10 acts. Pagination is available through the "? Page =" parameter. / acts / {: id} gives extended information about the act. fields are both enclosed in attributes.

Current State Tree:

▼act: {
  
  ▼act: {
  ▶attributes: {additionUrls, additions: null, city, collect: false, crime: false…}
  id: "154523"
  type: "act"
  }
  
  ▼actsPreview: [
  ▼0: {
    ▶attributes: {city, customer, date: 2021-10-15, expert: null, id: 154523…}
    id: "154523"
    type: "act_preview"
    }
  ▶1: {attributes, id: 154522, type: act_preview}
  ▶2: {attributes, id: 154521, type: act_preview}
  ▶3: {attributes, id: 154520, type: act_preview}
  ▶4: {attributes, id: 154519, type: act_preview}
  ▶5: {attributes, id: 154518, type: act_preview}
  ▶6: {attributes, id: 154517, type: act_preview}
  ▶7: {attributes, id: 154516, type: act_preview}
  ▶8: {attributes, id: 154515, type: act_preview}
  ▶9: {attributes, id: 154514, type: act_preview}
  ]
  }

Try to use ScrollView - https://snack.expo.dev/-6HxXAWme , https://stackoverflow.com/questions/41056761/detect-scrollview-has-reached-the-end — Quintis, Oct 14 '21 at 15:32

Michael Bahl · Answer 1 · 2021-10-15T09:07:05.060

I assume actsPreview is a property of state.attributes and state.act is the latest fetched page ?

I expect this will add the new values to the list view, to be sure I' ll need more code.

  const { actsPreview } = useSelector(state => ({
    ...state.act,
    ...state.attributes
  }))

But your implementation using an object which is unordered, you should think of using an array instead.

  const actsPreview  = useSelector(state => ([
    ...state.act.actsPreview,
    ...state.attributes.actsPreview
  ]))



  const { actsPreview } = useSelector(state => ({ // actsPreview is a property of state.act ?
    ...state.act,
    attributes: { ...state.attributes }, // Is attributes ever used?
  }))

Thanks, but that's not the case. Act Preview is an array of Acts. API gives / acts with an array of 10 acts. Pagination is available through the "? Page =" parameter. / acts / {: id} gives extended information about the act. fields are both enclosed in attributes. — sc00p, Oct 15 '21 at 09:00

How to create infinite scroll in Flatlist with Redux?

1 Answers1