reactjs - 从 getServerSideProps getState() 或 useSelector() 中获取状态值的正确方法?
问题描述
所以我一直在尝试使用next-redux-wrapper
并向我的 api 端点发出请求以获取带有redux-saga
. 我能够将数据提取到该州。我唯一的疑问是,从国家获得特定价值的正确方法是什么?我知道这两种解决方案是在函数组件中使用store.getState()
内部getServerSideProps()
还是使用useSelector()
钩子?
据我了解,我认为使用useSelector()
会违反服务器端渲染,因为它会调用客户端中的数据。这是对的吗?
我的代码使用useSelector()
:
export default function BlogsList(){
const blogs = useSelector(state => state.blogReducer.blogReducer.blog);
return(
<div className="mainCon">
<ul>
{blogs.map((item) => (
<li key={item.author}>
<span>{item.author}</span><br/>
<span>{item.title}</span>
<h4>{item.body_delta}</h4>
<p>{item.body_html}</p>
<p>{item.created_on}</p>
</li>
))}
</ul>
</div>
);
}
export const getServerSideProps = wrapper.getServerSideProps( async ({store, req}) =>{
store.dispatch({type: FETCH_BLOG_LIST});
store.dispatch(END);
await store.sagaTask.toPromise();
});
我的代码使用store.getState()
:
export default function BlogsList({blogs}){
return(
<div className="mainCon">
<ul>
{blogs.map((item) => (
<li key={item.author}>
<span>{item.author}</span><br/>
<span>{item.title}</span>
<h4>{item.body_delta}</h4>
<p>{item.body_html}</p>
<p>{item.created_on}</p>
</li>
))}
</ul>
</div>
);
}
export const getServerSideProps = wrapper.getServerSideProps( async ({store, req}) =>{
store.dispatch({type: FETCH_BLOG_LIST});
store.dispatch(END);
await store.sagaTask.toPromise();
const blog = store.getState();
const blogs = blog.blogReducer.blog;
return { props: {blogs}, };
});
哪种方法正确遵循服务器端渲染逻辑?
解决方案
您的代码使用store.getState ():
是正确的方法,正如您所提到的, useSelector 用于在客户端获取状态。使用 next-redux-wrapper 创建了两个存储,一个用于服务器(getStaticProps,getServerSideProps),一个用于客户端
推荐阅读
- java - 关于自上而下的方法soap Web服务wsimport工具问题wsimport在jdk bin文件夹中找不到所以请修复这个问题
- rust - 如何旋转对象以使其始终面向鼠标位置?
- python - 如何用整数扩展字典
- .htaccess - 想301重定向www.domain.com到ww.domain.com
- python - win32com 发送带有多个嵌入图像的电子邮件
- zabbix - 如何让Zabbix agent使用多线程来执行Userparameter?
- d3.js - 如何在 d3.js 中左对齐刻度?
- mysql - MySQL 优化建议
- excel - 获取工作表中行数的通用函数
- swift - UIView 的神秘 UIColor 行为以及 Swift 中的一般行为