在 React Native 中使用外部 API 渲染 Flatlist 的正确方法

Question

I have created a screen that has a flat list with a data source from an external API. I am storing those data in a state, using redux and then retrieving the data to flatlist.

I am for fetching the data from API I am using axios. So, to supply the source of data to flatlist, I am fetching the data in the previous screen. For example - I have a button, by which on pressing that button it will navigate to a new screen which contains a flatlist. So, I am fetching the data by posting axios request by the onPress function of the button from the previous page. And then storing that data to a state in the redux store, and then getting the data as a source to flat list.

I think this is not the right way to do this? How to fetch the data from external API on the same component and how to render that (because within fetching the data, the component will be rendered). How to do this effectively?

As, if everything is correct if the user goes to some other screen and re-enters the screen what will happen? How to do this effectively and optimized?

I think I don't have any code to show. If you guys need any code from above said, do let me know will update them.

Answer 1

You should probably try usingcomponentDidMount for calling your api. componentDidMount is invoked only once, immediately after the initial rendering occur. You mentioned you are storing data in your redux store.

You should probably create events like:

const Actions = {
  LOAD_POSTS_REQUEST: 'LOAD_POSTS_REQUEST',
  LOAD_POSTS_FAILURE: 'LOAD_POSTS_FAILURE',
  LOAD_POSTS_SUCCESS: 'LOAD_POSTS_SUCCESS',
};

const postReducer = {
      posts: [],
      isLoaded: false
};

Now, on LOAD_POSTS_SUCCESS you can set your data which you need in the flatlist with that also set a isLoaded state in the redux store. Now next time, when user re-enters the screen you can use the state.isLoaded check to call the api.

I am sure that what I am mentioning here is a way simple implementation. Hope this helps.