英文:
If i use Redux in NextJS 13, will it be still server-side project?
问题
我想在NextJS 13项目中（app文件夹结构）使用Redux。但是为了使用它，我需要使用provider，而provider将位于layout.jsx中。但是要使用provider，我需要使用"use client"注释来使其成为客户端组件。而且我的所有页面也都使用该布局。那么我的整个项目将是客户端，还是子页面仍然是服务器端？如果所有子页面都是客户端，那么使用Redux和NextJS有什么意义呢？
另一方面，如果我想从API获取数据并将其放入Redux中，我应该如何操作？要将其放入Redux中，我需要再次使用"use client"注释。因此，我无法在服务器端获取数据。我实际上感到非常困惑。请帮助我回答这些问题。感谢您的帮助 <3
英文:
I want to use Redux in NextJS 13 project (app folder structure) . But for use it i need use provider, and provider will be in layout.jsx. But for use provider, i need use "use client"; annotation for make it client-side component. And my all pages using that layout too. So my whole project will be client-side or childrens will be still server-side ? If its makes all children client-side then whats point to use nextjs with redux ?
In other hand if i want to fetch datas from API and put it to redux, how can i do it ? For put it to redux i need "use client" annotation again. So i cant take data in server side. I'm actually so confused. Please help me for that questions. Thanks for help <3
答案1
得分: 1
"use client";
import { Provider } from "react-redux";
import store from "../store/store";
const MyStoreProvider = ({ children }) => {
return <Provider store={store}>{children}</Provider>;
};
export default MyStoreProvider;
请注意，代码部分已被保留，没有翻译。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
"use client";
import { Provider } from "react-redux";
import store from "../store/store";
const MyStoreProvider = ({ children }) => {
return <Provider store={store}>{children}</Provider>;
};
export default MyStoreProvider;
<!-- end snippet -->
Use this custom provider with use client directive on top. Now wrap your layout with this custom provider
答案2
得分: 0
默认情况下，如果在组件包装器中添加use client指令，例如layout.jsx，则所有子组件将成为客户端组件。
但是，您仍然可以在page.jsx级别使用React服务器组件（如您所说的服务器端），并且它们的子组件可以是服务器组件（如果父组件是RSC，则为默认值），或者如果使用use client指令，则可以是客户端组件。
关于在app目录中使用redux，是可能的。您可以使用您的RSC来获取数据并将数据传递给redux的Provider以将数据存储在全局存储中。查看来自Jack Herrington的实现视频。只需注意，redux存储对您的服务器组件不可用。
英文:
By default if you add the use client directive in a component wrapper, in this case layout.jsx, all the children components will be client components.
However, you can still use React Server Components (servers-side as you say), and use these components at the page.jsx level, and their children could be either server components (default if parent is RSC) or client components if you use the use client directive.
About using redux with the app directory, it's possible. You could use your RSC to fetch data and pass that data to the redux Provider to store the data in your global store. Take a look to this implementation video from Jack Herrington. Just be aware that the redux store won't be available to your server components.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论