Повышайте свои навыки: расширьте возможности своего приложения React с помощью React-Router-Dom State Lifting!
Понимание состояний React. Состояние — это объект, представляющий текущее состояние компонента. Он содержит данные, которые могут меняться со временем, и определяет поведение и отрисовку компонента. Когда состояние обновляется, React автоматически перерисовывает компонент, чтобы отразить изменения.
Вот фрагмент кода, иллюстрирующий это:
import { useState } from "react"
export function App () {
const [count, setCount] = useState(0);
const handleAdd = () => setCount(prev => prev + 1)
return (
<div>Count is { count } </div>
<button onClick={handleAdd}>Increment</button>
);
}
Я определил базовую функцию подсчета с помощью кнопки, которая увеличивает состояние подсчета на единицу (1) при каждом нажатии, используя версию текущего состояния и обновленную версию.
Предполагается, что теперь вы понимаете, как работают состояния React. так как мы хотели бы углубиться, чтобы увидеть, как мы можем переместить состояния в URL.
Зачем перемещать состояния в URL?
Например, мы намерены создать веб-сайт электронной коммерции с использованием React JS. Затем мы намерены хранить всю информацию о нашем веб-сайте в состоянии :(
Это не идеально, поскольку URL-адрес продукта не должен храниться в состоянии. Но Почему?< br /> Помните, что состояние находится на устройстве пользователя и недоступно где-либо еще. Это снизит уровень нашей монетизации, поскольку пользователи не могут делиться продуктами с друзьями, поскольку все это жестко запрограммировано в состоянии.
Это становится самое время переместить состояния на URL, чтобы они были доступны всем и ими можно было поделиться. 😊
Это означает:
- Параметры URL можно добавлять в закладки и делиться ими
- Это улучшает пользовательский опыт, позволяя пользователям перемещаться вперед и назад очень удобным способом.
Теперь я могу добиться этого с помощью React-Router. Поскольку эта статья не о React-Router, я не буду тратить на это много времени. Вы можете проверить документацию, чтобы узнать больше.
Как обычно, каждая библиотека экспортирует пользовательские хуки, помогающие выполнять определенные задачи в нашем приложении. react-router экспортировал пользовательский хук useSearchParam.
Хук useSearchParam. Хук useSearchParam — это простой способ чтения и обновления параметров поиска URL в компоненте React, упрощающий создание закладок и ссылок, которыми можно поделиться. Он создает экземпляр собственного URL-адреса браузера, поэтому у него так много методов, которые могут соответствовать требованиям вашего приложения.
Это работает с параметрами запроса и обозначается символом ?.
Вот пример того, как это видно: https://shopify/sneakers?size=34 . URL-адрес просто описывает путь к странице кроссовок с размером = 34 на Shopify.
Настройка нашего приложения:
Предположим, у вас есть шаблон со списком всех продуктов. Давайте углубимся в реализацию продуктов со встроенной функцией сортировки по состоянию vs URL.
Как мы можем добиться этого, сохранив в состоянии:
- создайте компонент, который принимает все глобальные продукты в качестве реквизита для отображения списка найденных продуктов
- создать объект для хранения отфильтрованных продуктов
- Проведите фильтрацию товаров по названию.
- отображать отфильтрованный продукт пользователю
import { useState } from "react"
export const productLists = (products) => {
const [foundProduct, setFoundProduct] = useState([]);
const [inputValue, setInputValue] = useState(null)
const findByName = () => {
const filteredProducts = products ? products
.filter(product => product.name.includes(inputValue.toLowerCase()))
: null
setFoundProduct(filteredProducts)
}
const AvailableProducts = foundProducts.map(newProduct=> (
<div key={newProduct.id}>
<h2>{ newProduct.name} </h2>
<span>{newProduct.price}</span>
<article>{newProduct.description}</article>
</div>
))
return (
<>
<div>
<p>Search for a product </p>
<input
val={inputValue}
onChange={e => setInputValue(e.target.value)}
/>
<button role="search" onClick={findByName}>Search</button>
</div>
<h1>Available product from your input</h1>
<section>{AvailabeProducts}</section>
</>
);
}
Теперь мы понимаем, что это неэффективно, поскольку пользователь может захотеть поделиться отсортированным продуктом со своими друзьями. Это становится невозможным, поскольку состояния живут только в браузере.
Давайте рефакторим это, используя хук useSearchParam из react-router-dom, чтобы немного улучшить взаимодействие с пользователем.
- импортировать и использовать хук useSearchParam из react-router-dom
- сохранить текущий URL-адрес браузера в переменной
- и используйте метод get, чтобы получить переменную имени продукта (может быть, цена или что-то в этом роде.
- фильтровать по значению переменной. Здесь я использовал имя для фильтрации
- переберите отфильтрованный массив и верните соответствующую разметку.
import { useState, useRef } from "react"
import { useSearchParam } from "react-router-dom"
export const productLists = (products) => {
const [inputValue, setInputValue] = useState();
const [searchParam, setSearchParam] = useSearchParam();
const nameFilter = searchParam.get('name')
const filteredProducts = products ? products
.filter(product => product.name === nameFilter))
: null
const AvailableProducts = filteredProducts.map(newProduct=> (
<div key={newProduct.id}>
<h2>{ newProduct.name} </h2>
<span>{newProduct.price}</span>
<article>{newProduct.description}</article>
</div>
))
return (
<>
<div>
<p>Search for a product </p>
<input
val={inputValue}
onChange={e => setInputValue(e.target.value)}
/>
<button role="search"
onClick={() => setSearchParam({name: inputValue)}
>Search</button>
</div>
<h1>Available product from your input</h1>
<section>{AvailabeProducts}</section>
</>
);
}
Именно так можно повысить статус до URL на базовом уровне. Вы можете обратиться к документам react-router.
Если вы нашли это полезным, подпишитесь на меня в Twitter, поставьте лайк, оставьте комментарий или поддержите меня, купив мне кофе по этой ссылке. .
