从 getServerSideProps getState() 或 useSelector() 中获取状态值的正确方法？

Question

所以我一直在尝试使用 next-redux-wrapper 并向我的 api 端点发出请求以使用 redux-saga 获取博客。我能够将数据获取到状态。我唯一的疑问是，从国家获得特定价值的正确方法是什么？我知道这两个解决方案是在 getServerSideProps() 中使用 store.getState() 还是在函数组件中使用 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}, };
});

哪种方法正确遵循服务器端呈现逻辑？

Answer 1

您使用 store.getState (): 的代码是正确的方法，正如您所提到的，useSelector 用于在客户端获取状态。使用 next-redux-wrapper 创建了两个商店，一个用于服务器（getStaticProps，getServerSideProps），一个用于客户端

从 getServerSideProps getState() 或 useSelector() 中获取状态值的正确方法？

Correct way to get state value from inside getServerSideProps getState() or useSelector()?

reactjs

redux

redux-saga

next.js