next.js 如何在下一个13服务器组件中获得redux状态?

yqhsw0fo  于 2021-06-20  发布在  其他
关注(0)|答案(1)|浏览(200)

我是next13的新手,我很难弄清楚如何在服务器组件中检索redux状态,比如我的主page.js文件。有人能告诉我获取这些数据的步骤吗?

vtwuwzda

vtwuwzda1#

您可以通过导入您的商店并直接调用store.getState()来访问服务器组件中的Redux状态。需要注意的是,服务器将无法访问在客户端上创建/存储的状态,如果您的状态最初是在客户端上设置的(即,通过useDispatch())。
从我有限的测试中,我发现您需要使用store.dispatch(action(payload))从服务器组件设置状态。如果需要从客户端组件进行此分派,可以使用server action,如下所示:
服务器组件:

export default async function PageName() {

  async function setStateFromServer(action, payload) {
    // this is the server action
    'use server';
    store.dispatch(action(payload));
  }

  return (
    <>
      <ClientComponent stateSetter={setStateFromServer}/>
    </>
  )

客户端组件:

'use client';
export const ClientComponent = ({ stateSetter }) => {

  const handleSetState = () => {
    stateSetter(someAction, somePayload)
  }

  return ...
}

最后,您可以访问您的状态:

export default async function SomeServerComponent () {
  const state = store.getState();
  ...
}

相关问题