Как дела?
Я пишу это, потому что не так давно искал способ передачи состояний между компонентами без использования редукса и нашел useContext, в этой истории я объясню, как его использовать.
Требования
Чтобы понять это, вам нужно знать хуки, в основном useState.
Также вам нужно знать, как импортировать вещи, а также как использовать реакцию, потому что я объясню это с помощью реакции (это может также работать с nextJS)
ПЕРВЫЙ
Мы настраиваем наш проект, создаем контекст имени папки, а затем внутри него контекст имени файла js. Мы также можем поместить это в другой файл, такой как App.js, но я пытаюсь сделать его максимально чистым и читабельным.
Вот так должен выглядеть наш проект.
SECOND
В файле контекста мы добавляем импорт, который мы собираемся использовать, я добавляю хук useState, потому что пример, который я собираюсь показать, относится к useState
context.js
Общее объяснение состоит в том, что мы преобразуем его в контекст, когда
export const AppContext = createContext();
затем мы передаем дочерние элементы, потому что это все приложение, которое находится внутри него
и в
‹AppContext.Provider value={{name, setName}}›
Здесь мы передаем данные что все компоненты смогут использовать.
ТРЕТИЙ
Теперь, когда у нас есть файл контекста, давайте перейдем к App.js, где мы собираемся передать ‹AppWrapper› всем приложениям
App.js
Как видите, я уже передаю компоненты, которые использую, в данном случае это ‹Home/› и ‹Home2/›
Мы видим, что я передаю ‹AppWrapper› всем приложениям, так что все то есть внутри него будет возможность использовать состояния, которые мы изменяем.
Теперь давайте посмотрим, что внутри Home
home.js
Здесь мы видим, что я импортирую AppContext из контекста, который я буду использовать позже внутри компонента
const state = useContext(AppContext)
Здесь мы передаем состояния, чтобы использовать их следующим образом.< br /> Давайте посмотрим, как использовать состояние setFetching, чтобы сохранить дату в контексте и иметь возможность использовать ее позже в другом компоненте.
Я сделал асинхронный вызов API, в котором я сохраняю данные, которые я получил в setFetching,
чтобы использовать setFetching, сначала я должен вызвать state.setFetching, потому что мы получаем доступ к нему, выбрасывая контекст.
После того, как мы сохранили данные в контексте, давайте перейдем к файл, в котором мы собираемся его использовать
home2.js
Как мы видим, здесь я также импортирую useContext из «реакции», а также импортирую AppContext из контекста.
Затем определите состояние const = useContext(AppContext)
И, наконец, мы используем данные, которые хранятся
Вы сможете увидеть данные на консоли, добавив
console.log(состояние.выборка)
таким образом, вам не нужно будет отображать его, чтобы увидеть его
Вот и все, надеюсь, вам было полезно,
Вот репозиторий github https://github.com/lausuarez02/blogContext
Ура.
