Задать вопрос
vladosdc
@vladosdc
Frontend Developer
react

Next Js 13, ошибка при использовании Redux, как исправить?

Почему я получаю ошибку в Next Js 13 при использовании Redux?

Запись экрана - https://www.youtube.com/watch?v=heMlfvyhogQ&ab_cha...

Когда я где то пытаюсь использовать useSelector то получаю ошибку

Error - Unhandled Runtime Error
Error: could not find react-redux context value; please ensure the component is wrapped in a

Вот мой код

AppProvider.tsx:
"use client"
import store from '../store/store'
import {Provider} from 'react-redux';

export default function AppProvider({children}:any) {
    return <Provider store={store}>{children}</Provider>
}


layout.tsx

import './globals.scss'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Header from "@/components/Header/Header";
import store from '../store/store'
import AppProvider from "@/provider/AppProvider";
import {auth} from "@/firebase/firebase";

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Buy glasses or sunglasses - E-Shop',
  description: 'Buy glasses or sunglasses, E-Shop',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {



    const uid = auth.onAuthStateChanged(() => {
        console.log(auth.currentUser?.uid)
    })
    console.log(uid)


  return (
    <html lang="en">
      <body className={inter.className}>
      <AppProvider>
      <Header/>
      {children}
    </AppProvider>
      </body>
    </html>
  )
}
  • Вопрос задан
  • 764 просмотра
18 комментариев
Подписаться 1 Средний 18 комментариев
Решения вопроса 1
szQocks
@szQocks
надо убедиться что везде где используется useDispatch и useSelector - это клиентские компоненты
Ответ написан
10 комментариев
10 комментариев
Пригласить эксперта
Ответы на вопрос 1
@ChampionTommy
Для тех у кого подобная проблема.
Все что прокидывается за кастомным Provider, а в нашем случаем layout - не работает.
И ошибка, которая у него в описании - пишет ровно об этом же.
Избежать этого можно создав компонент корневой и в него закинуть все хуки из redux-toolkit.
<AppProvider>
     <Home>
        <Header/>
         {children}
      <Home>
    </AppProvider>

Добавив Home - мы внутри него можешь раскидывать все слайсы, мидлвары и прочее.
Или другой вариант - это упаковать дважды Provider и в одном из компонентов и в дочерний прокинуть все тоже самое.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
React Native Developer
Wanted. • Санкт-Петербург
До 300 000 ₽
Frontend React разработчик
Boomerangme 🎫
от 150 000 до 250 000 ₽
React Native разработчик
Бюро Цифровых Технологий • Санкт-Петербург
от 140 000 до 160 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подскажите, кто сможет реализовать?
25 дек. 2024, в 19:33
3000 руб./за проект
Создать ТГ бота для анализа графиков
25 дек. 2024, в 18:09
10000 руб./за проект
Монтаж видео, аудио. Создание песен Suno. Озвучка текстов в Elevenlabs
25 дек. 2024, в 17:35
5000 руб./за проект
Ещё заказы