问题标签 [next-redux-wrapper]

我正在使用 next.js 不可变 Js 和 redux saga。

错误：从“/me/profile-setting”中.initialState.ui返回的 错误序列化。getServerSideProps原因：object ("[object Object]") 无法序列化为 JSON。请仅返回 JSON 可序列化数据类型。

配置文件设置：

减速机

uiReducer：

我/个人资料设置：

检测设备：

我无法使用不可变的 Js 从服务器发送操作。

在不可变 Js 之前，一切正常。

它在 .initialState.ui 中显示错误

当我尝试从using商店发送文档中的操作时，我不断收到以下打字稿错误：getServerSidePropsnext-redux-wrapperredux-thunk

我的代码如下：

我是 next-redux-wrapper 的新手，并试图用它来跨页面保持状态。

在主页上，我有登录操作。登录成功后，我将 session.loggedIn : true 添加到 redux 商店。

当我转换到下一页 (getServerSideProps) 时，正在调用 HYDRATE 操作，但 action.payload 为空。当这个空对象与之前的状态合并时，之前的所有状态都会丢失。

这是状态合并 redux-logger 的快照：

我在第一页的代码与 getInitial Props：

转换后的（新页面）具有 getServerSideProps 的以下代码：

我可以看到，每次我导航到新页面时，水合物有效负载都是空的，并且会覆盖之前的状态。我在这里错过了什么吗？

编辑

我的reducer代码如下：我意识到服务器端没有太多的状态，如果我将它与客户端的状态合并，它将一扫而光。所以，我决定在他的水合物方法中返回未修改的状态（没有合并）。现在，它适用于我的用例。

我还有另一个问题，如果我重新加载页面，或者通过浏览器的地址栏导航到新页面，这将是一个新的加载并且没有可用的状态。看起来我已经使用 Redux Persist 来解决第二个问题。

目前要做 Next js 和 Redux 与 next-redux-wrapper 连接。

问题是代码不像我想的那样工作..

我正在尝试制作基本计数器

我所期望的

在 getServerSideProps 期间，调度 add(3) 将 3 添加到 initialState 0，

所以在 SSR 之后，预期的初始值为 3

但实际上是 0。

这是我的代码

索引.tsx

store.ts

我删除了看起来不必要的（某些类型...）和

在 _app.tsx 中，我确实用 WithRedux 包装了应用程序组件。

有什么我认为不正确的吗？？

试图用 next-redux-wrapper、redux、Next.js 做计数器。

我已经看到，当我单击几个计数器按钮，然后移动到其他页面并返回计数器页面时，getServerSideProps再次将计数器初始化为 3。我理解这个库，因为它有助于将 SSR 期间的调度结果合并到客户端 redux 存储，但不会将客户端存储状态同步到服务器 redux 存储。

我理解正确吗？

这是我的计数器应用程序代码

index.tsx

我一直无法让我的 nextjs 应用程序与 getServerSideProps() 一起使用以进行服务器端的 rednering。我尝试实现 next-redux-wrapper 但状态为空。

*注意：redux 在客户端运行时工作正常，但现在我试图获取状态getServerSideProps()并将其传递给组件，因此它在服务器上呈现。

商店.js：

减速器.js：

_app.js：

index.js：

在使用 next 时，我尽量配置 store，特别是 next-redux-wrapper。

我根据文档做了所有事情并且能够做到。没有错误，但控制台出现一条奇怪的消息

我可以肯定状态存在，这是真的！

回答

我不明白我该如何解决这个问题。

我正在尝试在 Next.js 应用程序中实现 Redux，但无法让调度功能在getInitialProps. 由于某种我无法弄清楚的原因，商店被返回为未定义。我正在使用 next-redux-wrapper。我已经关注了 next-redux-wrapper GitHub 页面上的文档，但是在某个地方出错了。我知道代码正在运行 - 我使用 axios 直接获取artPieces然后它工作得很好，但我想使用 Redux 代替。我正在将 react/express.js 应用程序更改为 Next.js 应用程序，我将在其中使用 API 进行所需的基本服务器操作。这只是一个小型博客应用程序。

这是我的store.js：

这是_app.js：

最后，这是它不起作用的地方。尝试将上下文上的调度调用到子组件以_app.js：

Next.js v12.0

下一个 redux 包装器。

每当我使用适当的下一个/链接元素离开页面然后再次返回（使用另一个链接 el）时，状态会重置为初始值，因此会执行另一个提取。对此奇怪的是，我以相同的方式设置了另一个“事务”切片，除了它包含一组事务对象并且一个工作正常（导航离开和返回并且数据不会重新获取，因为它持续存在在商店中）代码低于任何建议将不胜感激。

store.js

地址/reducer.js

地址/action.js

页面/[地址].js

我计划创建一个Next.js应用程序以及用于状态管理的Redux Toolkit 。我只会做静态生成（使用getStaticProps和getStaticPaths）。

我需要使用next-redux-wrapper ( https://github.com/kirill-konshin/next-redux-wrapper ) 吗？

我可以在不使用next-redux-wrapper 的情况下获得静态生成的所有好处吗？