React | по работе с удаленными данными советую (беседа) - PullRequest
0 голосов
/ 09 июля 2020

Я взял программу в Udacity для реагирования и реагирования native, и она меня хорошо научила, скажем так. c. Я пытаюсь создать свое первое тестовое приложение, которое обрабатывает данные, живущие удаленно.

В учебниках React мы использовали бы локальные фиктивные данные, пытались получить их и даже имитировали задержку с помощью вызова setTimeout. Но проблема в том, что учебники отлично работали только для тех типов приложений, которые они создавали. Я перейду к этому чуть позже ...

Описание моего приложения:

В настоящий момент я делаю тестовое приложение и пока могу: получить коллекцию продуктов питания (удаленные данные), отобразите данные и нажмите «LIKE» для любого. После нажатия кнопки Like этот URL-адрес пищевого продукта сохраняется в другом удаленном файле в учетной записи authedUser со свойством «избранное». Данные о продуктах питания на данный момент находятся в файле json, размещенном в репозитории github. и данные учетных записей пользователей тоже.

В ходе реакции я заметил, что данные будут поступать в хранилище redux. оттуда каждый раз, когда вы отправляете действие, которое связано с изменениями данных, например, «добавление в избранное» чего-либо, приложение сначала отправляет действие на сервер. Как только это разрешится, он будет отправлен в магазин redux и повлияет на него там. Теперь, насколько я понимаю ... это способ синхронизировать данные c? Это как это делают другие приложения? или это когда данные изменяются, вы только отправляете изменение на сервер и запрашиваете / извлекаете новые данные в redux после разрешения действия? Учебные пособия получат исходные данные, и, таким образом, они будут установлены и закреплены, а затем будут полагаться на рассылки для их синхронизации c. Было бы лучше просто использовать локальное состояние, чтобы получить нужные нам данные. против использования магазина?

Я не совсем уверен, что лучше, но мне кажется, что идея получения всего файла данных в приложении не масштабируется? например, когда вы используете Instagram, ваш телефон не загружает всю базу данных Instagram. Я думаю, он загружает только ваш профиль? а URL друзьям? et c?

поэтому для этого тестового приложения, которое я пытаюсь создать (описано шрифтом itali c выше ^), я не уверен, как go об этом. Я определенно не считаю целесообразным получать весь файл данных. Я знаю, что хочу, чтобы пользователь выводил на экран продукты питания, но только горстку за раз, возможно, с помощью поиска он изменяет результаты на экране. тогда пользователю может понравиться еда.

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

1 Ответ

1 голос
/ 09 июля 2020

Было бы неплохо сначала не интегрировать Redux. Просто создайте приложение на простом React.

Теперь поговорим о вашем приложении. Как вы сказали, скачивать всю базу данных - плохая идея. Когда вам нужно получить много данных, обычно используется разбивка на страницы. Это работает так: ваше приложение запрашивает 10 продуктов. Сервер возвращает эти 10 и сообщает вам, что данных больше, и вам следует сделать еще один запрос, если вы хотите получить больше. Нет смысла получать 1000 продуктов, если пользователь видит только 10 за раз, верно?

Допустим, вам нравится еда. После того, как вы нажали «нравится», этого недостаточно для обновления состояния вашего приложения, вам также необходимо внести изменения на сервере. Как ты это делаешь? Обычно у вас есть идентификатор продукта питания (скажем, 123), и вы, возможно, отправляете POST на https://server.com/like/123. Теперь этот запрос может завершиться ошибкой по разным причинам, и сервер не зарегистрирует ваш лайк. Таким образом вы обновляете локальное состояние только после успешного обновления в базе данных. Кроме того, вы можете захотеть обновить количество лайков (может быть, другим пользователям понравился этот продукт после того, как вы его выбрали), чтобы сервер вернул обновленное количество лайков.

Где здесь Redux? В React каждый компонент имеет собственное состояние. Они могут обмениваться данными между собой с помощью реквизита. Но это не масштабируется, и вы обычно попадаете в ситуацию, называемую бурением опоры. Redux store - это какое-то глобальное состояние. Например:

<FoodItems>
  <FoodItem key=1/>
  <FoodItem key=2/>
</FoodItems>

Допустим, вы каким-то образом обновили описание для первого FoodItem. Как вы сообщите об этом другим компонентам? В Redux вы отправляете действие и изменяете хранилище. Теперь другие компоненты могут подключаться к магазину и получать оттуда значение.

...