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

Question

这是我的_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上下文值；请确保组件包装在提供程序中。

如何访问_app.tsx内部的redux状态？顺便说一下，这是nextjs。

Answer 1

您的组件未连接到存储。通常这个包裹https://github.com/kirill-konshin/next-redux-wrapper用于包装next.js。一旦创建了包装器，就必须包装_app.jx

export default wrapper.withRedux(MyApp);

现在您可以使用useSelector访问任何组件中的存储

import { useSelector } from "react-redux";