问题标签 [use-reducer]

我的减速器有一种类型，例如：

我有一个接受样式对象的组件，属性是可选的，只是覆盖样式的当前状态。类型如下所示：

所以我基本上必须创建两种重复的类型，除了一种具有所有可选属性，一种没有。有没有更好的模式呢？我的直觉说这不是正确的方法。

首先，这是一个 CodeSandbox：https ://codesandbox.io/s/todolist-reducer-0y3mb?file=/src/context/TodosReducer.js

问题是即使我将带有新数组的有效负载传递给减速器，状态也没有更新。

我正在重新排列数组，如下所示：

然后发送它：

然后我在减速器中返回新状态。

记录有效载荷表明它是好的，但状态仍然没有更新。我正在使用 react beautiful dnd，所以也许这与它有关。

在我的 react-typescript 应用程序中，我正在尝试使用一个上下文提供程序来封装属性和方法并将它们公开给消费者：

问题是以下警告：

React Hook useEffect 缺少依赖项：'stockPrice'。包括它或删除依赖数组。eslint(react-hooks/exhaustive-deps)

stockPrice对我来说，将（基本上是提供者的 API）包含到 useEffect 的依赖项中没有任何意义。只有包含股票价格的实际价值以防止无限调用 useEffect 函数才有意义。

问题：我尝试使用的方法有什么问题，或者我可以忽略这个警告吗？

提供者：

useReducer在反应中使用钩子时是否可以使用调度功能发送多个动作？我尝试将一系列操作传递给它，但这会引发未处理的运行时异常。

明确地说，通常会有一个初始状态对象和一个 reducer，如下所示：

然后可以像这样使用 useReducers 调度函数来处理反应应用程序中的状态。

我想做的是将这两个突变发送到一个数组中，这样我只需要调用一次调度，如下所示：

现在我写下来了，我意识到从技术上讲，我可以编写 reducer 来接受数组而不是字符串，然后映射到该数组。但这被认为是一种好习惯吗？

我的 React App 中有一个父子组件Modal和ModalContent都可以使用。

1) 我在 App.js 中创建了一个 AppContext，用于在所有组件中全局访问它。

const [state, dispatch] = useReducer(reducer, {modalOpen: false, content: []});

这里的reducer是一个相当简单的函数，带有用于modalOpen和内容（数组）中的推送/弹出功能的切换。

2）我的Modal组件利用

获取模态可见性的状态以将其设置为打开/关闭。

3）我的ModalContent组件利用

4）这是我的减速机。

我已经设置了一些代码ModalContent来使用调度更新数据content属性，并且减速器存储完美更新并返回新鲜/更新：

问题是：每当我通过ModalContent完成状态调度一个动作时，reducer 会返回（预期），并且 Modal 在侦听 state.modalOpen 时会重新打开。

不成功的尝试：我试图在各个组件中专门提取所需的属性。但是Modal即使仅更改内容，组件仍会重新呈现。有没有办法只关注特定的状态

如何通过仅ModalContent不重新渲染来完成这项工作Modal。

编辑：用我的模拟（工作）reducer 代码和来自 ModalContent 本身的调度语句更新了问题。

试图转换成打字稿..无法弄清楚如何制作动作类型和有效负载..我正在使用 useContext 并使用 Reducer 我基本上希望我的动作从提供的 ./types 的键中获取类型，然后找出方法提供pyaoad 这是我的状态

}

导出默认 AlertState

这是我的减速机

在此，我提供的操作类型是任何类型，但我希望它是来自 ./types 文件的类型

在这里，提到“你能相信 React 以与调用 setState 相同的顺序更新状态......是的”。我的问题是调度（useReducer）事件是否也以与调用它们相同的顺序运行？例如，考虑这样的事情：

我可以确定reducer函数中的所有逻辑都使用参数 'a' 执行，并且使用参数 'b' 执行（使用参数 'b' 的调用使用第一次调用修改的状态）？

MODIFIED：那么 reducer 和 setStates 的组合呢？他们的通话顺序是否也保持不变？例如，一个 setState，一个 reducer（它使用 setState 中设置的状态的值）。

我目前有一个带有标题的页面：h1、h2、h3。我希望他们的文本可以由用户 onClick 编辑，所以基本上标题将变成 input type='text' 然后当用户在输入中输入他的值时恢复到标题。我使用 useReducer 钩子让这个功能工作得很好，我在其中调度了与每个相关的相应值。但是，我正在努力弄清楚如何使 textIsEditing prop/boolean 可在所有 3 个组件中重复使用。让我用代码解释一下：

JSON数据：

包含 3 个标头的组件：

减速机：

重命名输入：

在我的 MetaData 组件上，我真的不喜欢这部分代码

我想让它在所有 3 个组件中重复使用，因为它实际上在做同样的事情。我需要一个函数来处理所有这三个，但我真的不确定在哪里或如何做到这一点？我是在减速器中执行此操作，还是如何将其转换为工厂功能？一定有比我做的更好的方法{nameIsEditing ? renameComponent : h1 {campaignIsEditing ? renameComponent : h2 {descriptionIsEditing ? renameComponent : h3

如果我们在文档示例中看到：https://reactnavigation.org/docs/auth-flow/：

SignInScreen位于同一个App.js中。如果我们将SignInScreen.jsSignInScreen作为一个新文件发布，如何从SignInScreen.js调度？signIn

我有一个简单的反应应用程序，其中有一个FruitsList组件用于显示列表中的水果，一个FruitForm组件用于添加水果，两者都包含在Fruits组件中。我正在使用useContext和useReducer管理水果的状态。我已经为它创建了一个FruitContext。我想停止FruitForm的重新渲染，因为它只使用调度功能并且每次添加新水果时重新渲染它都是无用的。请建议任何解决方案。

表单组件

水果清单

水果

FruitContext

水果减速机