页面重新加载时，客户端状态未从服务器得到补充

Question

创建新商店后，客户端状态未从服务器得到水化

CodeSandBox Link - https://codesandbox.io/s/vibrant-aryabhata-l29r2b

重现该行为的步骤：

1. 运行上面link上的应用。
2. 使用任何 username/password
登录
3. 登录时，令牌保存到 cookie，页面重定向到仪表板
4. 在仪表板页面的控制台中，我正在打印当前状态，在我们登录时显示正常。
5. 现在刷新仪表板页面。
6. 服务器通过 cookie 获取令牌并通过身份验证
7. 但是在客户端上创建新商店时，它不会获得 hydrated/updated 状态。
8. 从本页 console.log 中打印的身份验证状态可以确认相同。

预期行为

在页面重新加载时，hydration 客户端也应该通过身份验证，因此控制台将打印 logged in true。

截图

您可以在上面的屏幕截图中清楚地看到，根据水合作用 (__NEXT_REDUX_WRAPPER_HYDRATE__ )，状态已正确更新，但在客户端的控制台日志中，我得到的 loggedin 为 false .

• Next.js: [12]
• Next-redux-wrapper [7]

其他上下文

我卡住了一段时间，真的不知道我的代码是否有问题或者是错误。请研究并提出相应的建议。

Answer 1

您有一个轻微的配置错误。 next-redux-wrapper 已经 adds 一家拥有正确商店的供应商。您需要删除放入 _app.js 中的额外提供程序。这就是组件未获得正确数据的原因。

  render() {
    const { Component, pageProps, router } = this.props;
    return <Component {...pageProps} router={router} />;
  }