问题标签 [use-reducer]

从文档：

[init, the 3d argument] 让你提取在 reducer 之外计算初始状态的逻辑。这对于稍后响应操作来重置状态也很方便。

和代码：

为什么我要重复使用一个常量initialState？

对我来说看起来不那么冗长。

我正在尝试专门用于响应钩子useReduce，为此我正在制作一个todoList示例，在该示例中，我想使用一个 reduce 来管理诸如添加、编辑、更新、删除和更改任务的完成状态等操作的状态和在另一个减少管理过滤器中，我可以列出所有todos或仅列出已完成和未完成的过滤器。

是否可以使用 useReducer 钩子通过多个 reducer 来管理状态？

现在，我不得不混合减速器，具有以下逻辑

现在reducetodoFilter我用它作为一个助手来列出todos

更新 1

我得到了这个解决方案

Todo减速机

减滤器

主减速机

这可行，但我不喜欢它，因为必须在主减速器和辅助减速器中重复动作类型，最终某些动作类型将被省略，应用程序将失败。

有更聪明的解决方案吗？

感谢您的意见

我一直在尝试将我的减速器与我的上下文提供程序维护在同一个文件中。但是，我无法弄清楚如何在组件文件中使用它。

在我的 Context 函数内部：

在表单内部的组件处：我怀疑我没有正确使用调度，但无法通过谷歌搜索解决它

希望你们都做得好。我不会问编码问题。我开始了关于反应的新项目，我更新鲜了。我需要知道，我们是否需要为每个组件单独的减速器。（例如，假设我有类别组件，我将在其中显示所有类别并提供一个表格来插入新类别。现在我有另一个名为标签的组件。同样的事情也会发生在这里。所以我需要CategoryReducer & TagReducer单独的）。

我有一个初始数组，可以添加和删除，那里没有问题..

..但我试图弄清楚如何使用调度功能有效地编辑其中一项的文本。

我的调度看起来像这样：

这只是传递输入的值

我的减速器文件如下所示：

我已经在 'EDIT_ITEM' 类型中尝试过 2 种方法进行了评论。

方法 1 只是删除该项目并添加一个新的值，尽管它位于数组的底部，这不是我想要的，所以我必须尝试重新排序。

方法 2 是使用拼接，我认为这可以用于替换具有指定值的项目。然而，它返回的只是原始文本的“编辑”（因此甚至没有编辑），并删除了其他所有内容。

我如何错误地使用此功能，还是有更好的方法来编辑项目？我显然做错了什么，但不知道是什么。我搜索并尝试了各种方法均无济于事。

理想情况下，我希望该项目也保持与以前相同的 ID，因此如何保持这一点将是一个加号。

我正在尝试使用 toString 临时将一个类输出到 DOM。我遇到了一些我不明白覆盖toString()将始终输出初始状态的行为。但是，如果使用外部函数（即 stateToString）甚至JSON.stringify，更新后的状态会按我的预期输出。

下面是我尝试最小化重现这种行为。重申一下，我的预期行为是让他们所有人最初输出：["initial"]，他们会这样做。但是，toString()单击按钮时输出不会更新，但其他两个会更新。

这似乎特别奇怪，stateToString并且State.toString似乎本质上是相同的函数，除了一个将状态作为接收器，另一个将状态作为参数。

如果有人能解释为什么会发生这种行为，我将不胜感激。

技术信息：前端的 ReactJS + Typescript。使用 nodeJS+express 构建的 REST API，将数据存储在 Cloud Firestore 数据库中。前端 React 应用程序使用 REST API 检索数据。

前端的状态管理：我目前正在使用 React 钩子进行状态管理。useContext 用于管理全局状态（用户/会话信息），而 useReducer 用于路由级别状态。useReducer 钩子由任何给定路由中的顶级组件调用。

请求建议：如果用户对 UI 执行操作，我想更新本地状态并立即在 UI 中显示适当的更改。我想确保将数据保存到我们的后端，并且仅在我们未能保存数据时显示错误消息。

1. 在这种情况下，处理数据同步的最无缝方式是什么？这里最好的建筑是什么？
2. 我应该从 reducer 的每个操作中调用 REST API 吗？
3. 在整个大型应用程序中实现这一点的最简洁方法是什么？我应该如何组织我的代码以进行数据同步？
4. 同样，如果我想在后端监听用户对象的变化，并使用 useContext 钩子重新加载存储在全局状态中的用户信息，我应该如何尝试这样做？

PS 我喜欢 Asana 无缝同步和保存数据的方式。我想知道如果我想获得无缝的体验，这里的最佳实践是什么。

我正在尝试在 Next.js SSR 应用程序中使用 localStorage 和 React 挂钩创建持久状态，一切看起来都不错，但是当我在更新数据后重新加载页面时出现错误：

警告：文本内容不匹配。服务器：“0” 客户端：“5”

我能做些什么来修复它？这是我的代码：

代码沙盒中的演示

我的目标： 我正在创建一个向用户显示数据的表格。基于存储在全局状态中的某个值（存储在上下文 API 提供给其他组件的 reducer 函数中），我将在滚动时将该标题固定到页面顶部，但仅当表格处于视图中时。为此，我必须注册一个 on Scroll 和 on Resize 事件侦听器，以在用户滚动或调整屏幕大小时重新计算表格位置。我想将全局状态更新为isHeaderActivelyFixed: true仅在表处于视图中且状态尚未设置为isHeaderActivelyFixed: true. 否则，每当表格在视图中并且用户滚动到时，我都会不断更新状态isHeaderActivelyFixed: true，同样，当它不在视图中时isHeaderActivelyFixed: false

问题： 我按照我认为需要的方式设置了上述场景。但是，当我分派到全局状态然后控制台日志或使用该全局状态时，它并不能反映我刚刚分派给它的内容。react 开发工具确实显示了我分派的更新状态，但我需要能够在我分派它的函数中更新新分派的状态。这样我就知道不会再次分派它。我希望这是有道理的。提前致谢！

代码：（注意：我删除了不必要的代码，所以有些东西可能看起来很奇怪。我留下了一些代码来提供问题的上下文。我评论的区域是问题出现的地方。该isActivelyViewed()函数只是获取表格getBoundingClientRect()并检查它是否还在）

ProductTableStore.jsx

ProductTable.jsx（我有问题的文件）

假设我实现了一个简单的全局加载状态，如下所示：

然后假设我有一个组件可以改变加载状态，但从不消耗它，如下所示：

根据 useReducer 文档，调度具有稳定的身份。我将此解释为，当组件从 useReducer 提取调度时，当连接到该调度的状态发生更改时，它不会重新渲染，因为对调度的引用将始终相同。基本上，调度可以“像静态值一样对待”。

然而，当这段代码运行时，该行dispatch(actionCreators.setLoadingOn())触发了对全局状态的更新，并且useLoading钩子再次运行，因此dispatch(actionCreators.setLoadingOn()) （无限重新渲染-_-）

我没有正确理解 useReducer 吗？还是我正在做的其他事情可能会导致无限重新渲染？