Правильный способ рендеринга Flatlist с внешним API в реагирующем Native

Question

Я создал экран с плоским списком с источником данных из внешнего API.Я храню эти данные в состоянии, использую избыточность и затем извлекаю данные в плоский список.

Я для извлечения данных из API. Я использую axios.Итак, чтобы предоставить источник данных в плоский список, я извлекаю данные на предыдущем экране.Например - у меня есть кнопка, с помощью которой при нажатии этой кнопки она перейдет на новый экран, который содержит плоский список.Итак, я извлекаю данные, публикуя запрос axios с помощью функции onPress кнопки с предыдущей страницы.А затем сохранить эти данные в состоянии в хранилище с избыточностью, а затем получить данные в качестве источника в плоский список.

Я думаю, что это не правильный способ сделать это?Как извлечь данные из внешнего API в том же компоненте и как их отобразить (потому что при получении данных будет отображаться компонент).Как это сделать эффективно?

Как, если все будет правильно, если пользователь перейдет на другой экран и снова войдет в экран, что произойдет?Как сделать это эффективно и оптимизировано?

Я думаю, что у меня нет кода для показа.Если вам, ребята, нужен какой-нибудь код из вышеперечисленных, дайте мне знать, что обновлю их.

Answer 1

Возможно, вам следует попробовать использовать componentDidMount для вызова вашего API. componentDidMount вызывается только один раз, сразу после того, как происходит начальный рендеринг. Вы упомянули, что храните данные в своем редукционном магазине.

Вы, вероятно, должны создавать такие события, как:

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
};

Теперь на LOAD_POSTS_SUCCESS вы можете установить необходимые данные в плоском списке, а также установить состояние isLoaded в резервном хранилище. Теперь в следующий раз, когда пользователь снова войдет в экран, вы можете использовать чек state.isLoaded для вызова API.

Я уверен, что то, что я упоминаю здесь, является простой реализацией. Надеюсь, это поможет.