如何在_app.tsx中使用Redux状态(NextJS)

tp5buhyn  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(171)

这是my _app.tsx的代码

import '../styles/globals.css'
import AppNav from '../components/AppNav'
import type { AppProps } from 'next/app'
import { store } from '../store'
import { Provider } from 'react-redux'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '../store'

function MyApp({ Component, pageProps }: AppProps) {

  const user = useSelector((state: RootState) => state.user.value)

  return (
    <Provider store={store}>
      <div className='global_container'>
        <AppNav />
        <Component {...pageProps} />
      </div>
    </Provider>
  )
}

export default MyApp

在代码中,我试图在_app.tsx中使用用户redux状态,但是它给了我一个错误:错误:找不到react-redux上下文值;请确保组件 Package 在提供程序中。
我如何访问redux状态inside _app.tsx?顺便说一下,这是nextjs。

dxpyg8gm

dxpyg8gm1#

您的组件未连接到存储区。通常,此包https://github.com/kirill-konshin/next-redux-wrapper用于 Package next.js。创建 Package 后,您必须 Package _app.jx

export default wrapper.withRedux(MyApp);

现在,您可以使用useSelector来访问任何组件中的store

import { useSelector } from "react-redux";

相关问题