问题标签 [next-redux-wrapper]

我正在使用 next-redux-wrapper 并从各个页面的 getServerSideProps 调度操作。但我意识到我无法从另一个页面访问填充的商店状态。如果我尝试在客户端或服务器端尝试，则状态在其他页面中返回为空。

所以，我听说需要使用 getInitialProps 在所有页面之间共享状态。由于我对所有这些感到困惑，因此我想消除一些疑问。我想知道：

1. 当使用 redux 和 next-redux-wrapper 时，什么时候需要（如果有的话）在 _app.js 文件中使用 getInitialProps？我听说需要在 _app.js 中使用 getInitialProps 才能使每个页面都可以访问状态。但这对我不起作用。可能是因为执行错误！

2. 如果我在 _app.js 中使用 getInitialProps 那么是否不需要在单个页面中使用 getServerSideProps 或 getStaticProps ？

3. 使用 getServerSideProps 填充状态后，我是否可以在不使用 _app.js 中的 getInitialProps 的情况下将状态共享给每个页面，或者如果需要，我可以将获取的状态传递给 _app.js 中的 getInitialProps 吗？

我在 NextJs 应用程序中使用了两个库：next-firebase-auth和next-redux-wrapper. getServerSideProps它们都要求我用它们各自的功能进行包装。

为了next-firebase-auth

为了next-redux-wrapper

两者都单独工作，但我无法让两者同时工作。NextJs 只允许getServerSideProps声明一次。是否有可能以某种方式组合多个包装器？

所以我试图解决我在使用时面临的保湿问题wrapper.getServerSideProps。当我使用当前设置重新路由时，存储被清除，然后添加新数据，这导致一个白页，因为许多重要数据不再存在（即翻译和 cms 数据）。

redux-dev-tools 的屏幕截图 Hydrate 操作差异：

从主页路由到产品页面后截取屏幕截图，因此存在现有商店。一切都重置为初始应用程序状态。

我想要做什么

在 store.js 中，我创建了 store 并预见了一个 reducer 来处理 Hydrate 调用。这种方法的缺点是有效负载将始终是一个新的存储对象，因为它是在服务器上调用的。我正在考虑检查 2 个 json 之间的差异，然后只应用差异而不是整个初始存储。

1. 获取客户端和服务器状态之间的差异。
2. 制作下一个状态，用修补过的服务器状态覆盖客户端状态，因此这包括来自 hydra 的更新状态和现有客户端状态。
3. 当前结果是一个白页。

你可以在 store.js 中看到下面的 reducer 代码

所以基本上我正在开发一个使用身份验证的 nextjs 应用程序。我有 2 个函数，我在每次页面加载时运行。第一个检查 jwt cookie 是否存在，如果令牌不存在，则调用另一个函数来验证令牌。此函数从 wrapper.getServerSideProps 运行，并在上下文中作为 ctx 传递。此功能按预期工作。

第二个功能是令牌验证器，这就是问题出现的地方。我有一个对象，如果验证成功，我打算更新它，如果不成功，就别管它。这是功能

问题是.then确实更新了对象，当我在.then中使用 console.log(obj) 时，它显示了要返回的正确 obj，但是当我返回 obj 时，它仍然保留 false 和 null 的初始值. 我不明白问题是什么。我尝试在 .then 本身中进行返回，但它通过了这个错误 TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as it is undefined。这里有什么问题？一切看起来都很好，但更新后的 obj 没有返回。

我目前正在使用 axios 和 NextJS。

我目前在我的组件中有这个代码：

这个 getserverSideProps 调用的函数getVideo看起来完全像这样：

所述函数通过我的 api 函数向后端发出请求：

它在执行 POST、PUT、PATCH 请求时效果很好。

如您所见，我正在做一个console.log('data: ',data)，但[AsyncFunction (anonymous)]每当我阅读终端时它都会返回；另一方面，前端返回此错误：

服务器错误错误：从“/videos/[id]/[slug]”中.videoContent返回的 错误序列化。getServerSideProps原因：function 无法序列化为 JSON。请仅返回 JSON 可序列化数据类型。

有谁知道如何解决这个问题？

注意：我正在使用 react-redux、redux 和 next-redux-wrapper。

我是下一个新手，几天以来一直在尝试为基于下一个类的组件设置样板代码并反应 redux。

到目前为止我尝试了什么

_app.js

index.js

与上面的代码一样，我在安装组件时加载大学和州数据。在查看页面源代码时，我没有看到服务器呈现的 html。

我正在尝试将下一个 js 示例与 redux config 一起使用。我遇到了两个示例，一个使用简单的 with-redux配置设置，另一个使用with-redux-wrapper。

我阅读了所有自述文件，但仍然不太明白。每个示例的用例是什么？

最重要的是，在下一个 js 项目中使用简单的 with-redux 配置和使用最新的 with-redux-wrapper 配置有什么区别？

套餐：

1. redux-observable@2.0.0-rc.2
2. rxjs最新的
3. universal-rxjs-ajax开发分支
4. next-redux-wrapper最新的
5. next.js最新的

我有一个简单的页面getStaticProps：

动作'ADD_DATA'触发动作'SERVER_ACTION'：

在reducerincase 'SERVER_ACTION':子句中，我收到了有效负载：

但是有效载荷没有传递给HYDRATE行动：
console.log('HYDRATE >', action.payload); // logs out "HYDRATE > { server: { data: null } }"

'SERVER_ACTION'如果我从内部调度动作getStaticProps：

接收载荷HYDRATE内部的动作：reducer
HYDRATE > { server: { data: 'https://rickandmortyapi.com/api/character' } }

我不明白我的代码有什么问题。
可能是其中一个库中的错误吗？还是我的代码有错误？

如果有人有任何建议，请

我正在开发一个简单的 next.js 应用程序。对于状态管理，我使用的是 next-redux-wrapper。在我的主页中，我想使用store.dispatch.

当我使用getServerSideProps和调度一个动作时，它会获取我所有的房间。但问题是当我想用它来取房间时，getStaticProps什么都没有发生。

我应该在开发大型应用程序时使用 next-redux-wrapper 还是应该尝试其他库。因为我想在我的应用程序中使用getStaticPaths,getStaticProps和getServerSideProps。在这些函数中，我通常会发送一个 redux 动作。

Store.js 文件

_app.js 文件

页面/index.js 文件

我是 React、Redux 的新手，并且一直在关注有关该主题的教程。我遇到了很多我能够解决的问题，但我遇到了一个我无法解决的问题。我设置了商店，甚至可以通过 Chrome 的 Redux 工具查看它并正确显示，但是当我尝试发送到商店时，我总是收到无法读取未定义错误的属性“发送”。我已经遵循了许多教程，但仍然遇到相同的错误消息。

索引.Js

roomConstants.js

减速器.js

Store.js

roomReducer.js

roomAcion.js