Lun*_*una 28 reactjs redux server-side-rendering react-redux next.js
随着新的 NextJS 13 引入app目录，redux 仍然有意义吗？
按照下一个文档，已经可以将 redux 提供程序包装在客户端组件周围。但是与 redux 共享状态将如何影响 Next 性能和优化？
接下来的文档要求在需要数据的地方获取数据，而不是向下传递组件树。请求将被自动删除重复数据。
我对 Redux 的用途是控制应用程序中我希望保持一致的某些部分。
例如：如果我更改用户名，我希望它反映在需要该数据的整个应用程序中。
小智 22
我最近开始使用 NextJS，遇到了同样的问题，经过一番研究后，我设法让它工作，而无需用 ReduxProvider 包装每个客户端组件。
根据 NextJS 团队提供的文档，建议使用 Providers 客户端组件，该组件将为任何其他客户端组件提供上下文。
更多详细信息请参见：NextJS Context 文档
步骤1：在app/providers中创建一个Provider组件（确保这是一个客户端组件）
"use client";
import { useServerInsertedHTML } from "next/navigation";
import { CssBaseline, NextUIProvider } from "@nextui-org/react";
import { PropsWithChildren } from "react";
import ReduxProvider from "./redux-provider";
type P = PropsWithChildren;
export default function Providers({ children }: P) {
useServerInsertedHTML(() => {
return <>{CssBaseline.flush()}</>;
});
return ( // you can have multiple client side providers wrapped, in this case I am also using NextUIProvider
<>
<ReduxProvider>
<NextUIProvider>{children}</NextUIProvider>
</ReduxProvider>
</>
);
}
创建一个 redux 提供者组件。
"use client";
import { PropsWithChildren } from "react";
import { Provider } from "react-redux";
import store from "../redux/store/store";
export default function ReduxProvider({ children }: PropsWithChildren) {
return <Provider store={store}>{children}</Provider>;
}
在 RootLayout 组件中使用提供程序组件。（应用程序/布局.tsx）
import Header from "./components/organisms/Header/Header";
import { PropsWithChildren } from "react";
import Footer from "./components/molecules/Footer/Footer";
import Providers from "./providers/Providers";
import MyBasketTab from "./components/organisms/MyBasketTab/MyBasketTab";
type Props = PropsWithChildren;
export default function RootLayout({ children }: Props) {
return (
<html lang="en">
<head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<Providers>
<Header />
{children}
<Footer />
<MyBasketTab /> // this client component can now fully use the redux hooks and access the store.
</Providers>
</body>
</html>
);
}
"use client";
import styles from "./MyBasketTab.module.css";
import { useAppSelector } from "../../../redux/hooks/hooks";
export default function MyBasketTab() {
const isBasketSideMenuOpened = useAppSelector(
(x) => x.basket.isBasketSideMenuOpened
);
return (
<div
className={`${styles.container} ${
!isBasketSideMenuOpened ? styles.opened : styles.closed
}`}
>
<p>My Basket</p>
</div>
);
}
| 归档时间： |
|
| 查看次数： |
20163 次 |
| 最近记录： |