vladosdc
@vladosdc
Frontend Developer

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>
  )
}
  • Вопрос задан
  • 510 просмотров
Решения вопроса 1
szQocks
@szQocks
надо убедиться что везде где используется useDispatch и useSelector - это клиентские компоненты
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ChampionTommy
Для тех у кого подобная проблема.
Все что прокидывается за кастомным Provider, а в нашем случаем layout - не работает.
И ошибка, которая у него в описании - пишет ровно об этом же.
Избежать этого можно создав компонент корневой и в него закинуть все хуки из redux-toolkit.
<AppProvider>
     <Home>
        <Header/>
         {children}
      <Home>
    </AppProvider>

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

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

Войти через центр авторизации
Похожие вопросы