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

#javascript #list #react-native

#javascript #Список #react-native

Вопрос:

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

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

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

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

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

Ответ №1:

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

Вероятно, вам следует создавать события, подобные:

 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 вы можете установить свои данные, которые вам нужны, в flatlist, которые также задают isLoaded состояние в хранилище redux.
Теперь в следующий раз, когда пользователь снова войдет в экран, вы можете использовать state.isLoaded проверку для вызова api.

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