如何在接下来的 13 个服务器组件中获取 redux 状态？

Question

我是 next13 的新手，我很难弄清楚如何在服务器组件（例如我的主page.js文件）中检索 redux 状态。有人可以告诉我获取该数据的步骤吗？

Answer 1

您可以通过导入您的存储并直接调用来访问服务器组件中的 Redux 状态store.getState()。需要注意的是，服务器将无权访问客户端上创建/存储的状态，如果您的状态最初是在客户端上设置的（即通过useDispatch()），则会出现这种情况。

根据我有限的测试，我发现您需要使用store.dispatch(action(payload)). 如果您需要从客户端组件进行此调度，您可以使用服务器操作，如下所示：

服务器组件：

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();
  ...
}