#javascript #reactjs #react-redux #react-router
Вопрос:
Я создаю веб-сайт React с API для стран отдыха. Моя маршрутизация проста, вам нужно пройти через каждую страницу, чтобы перейти в конец, где URL будет выглядеть примерно так: «localhost: 3000/страны/Канада/Торонто«.
lt;Route path="/" index element={lt;Home /gt;} /gt; lt;Route path="/countries" element={lt;AllCountries /gt;} /gt; lt;Route path="/countries/:countryName" element={lt;SingleCountry /gt;} /gt; lt;Route path="/countries/:countryName/:city" element={lt;City /gt;} /gt; Теперь в компоненте AllCountries эффект использования отправит вызов API, сохранит данные в хранилище. При выборе страны соответствующий объект для этой страны также сохраняется в хранилище, и пользователь затем продолжит /страны/:Выбор страны или компонент одной страны, где пользователь теперь выберет город, и дополнительные данные будут переданы в /страны/:Выбор страны/:Выбор города.
Однако до сих пор никаких проблем не возникало, если бы я вручную переходил по URL-адресу в /страны/Франция/Париж-ни одного моего штата в магазине нет, потому что, конечно, я не переходил по сайту, и мои сообщения не отправлялись.
Мне удалось устранить эту проблему в компоненте «Одна страна» (если пользователь пропустил все страны), добавив эффект использования и получив API стран, если данные отсутствуют в хранилище. Однако я столкнулся с той же проблемой в городском компоненте, и для ее решения потребуется несколько отправок при первоначальном рендеринге компонента, и я решил, что пришло время для более надежного решения.
Комментарии:
1. Из того, что я понял, похоже, что вы получаете абсолютно все с самого начала при доступе к /странам, а затем просто просматриваете данные. «Мне удалось устранить эту проблему в компоненте» Одна страна «(если пользователь пропустил все страны), добавив эффект использования и получив API стран, если данные отсутствуют в хранилище » Снова, получив все?! Как выглядит ваш API? Разве вы не можете получить данные для определенной страны только при доступе к ним ?
2. Кроме того, зачем вам нужен магазин?
3. @jperl lol, я так не думаю, но цель этого проекта-изучить redux. Теперь я понимаю, что в этом нет необходимости. Хорошо, но если бы я вручную перешел в /страны/Франция/Париж, как бы я получил правильные данные, как бы я динамически заполнял приложение правильными данными?
4. Я выбираю API в /странах, затем передаю выбранную страну в /Имя страны, которое использует API, а также локальные данные на основе выбранной страны. Затем, в зависимости от выбранного города, я передаю это название города компоненту города и показываю больше контента
5. Просто обновление, я использовал { useLocation } из react-маршрутизатора для анализа URL-адреса, захватил строку city:, перебрал данные, чтобы найти правильный объект, а затем сохранил его. Теперь, несмотря на плохое использование redux в приложении, которое в нем не нуждается, будет ли такой анализ URL-адреса считаться плохой практикой?