reactjs - 复杂状态下使用 Hook useReducer 的正确方法

Question

试图 catch React Hooks .我读到他们推荐使用 Hook useReducer处理复杂的state .但我的怀疑是从以下方案开始的:

使用 react + typescript ，假设我有一个包含多个字段的状态(我将举一个带有类的示例):

type Person = {
   username: string,
   email: string
}

type Pet = {
   name: string,
   age: number
}

this.state: MyState = {
    person: Person,
    pet: Pet,
    loading: boolean
}

如果我想用一种新的基于 Hooks 的方法来处理这种状态，我可以考虑几个选项:

选项 1:使用 Hook useState对于每个字段

const [person, setPerson] = useState<Person>(null)
const [pet, setPet] = useState<Pet>(null)
const [loading, setLoading] = useState<boolean>(false)

这种方法的缺点是可扩展性低，而且我的一些真实状态至少有 15 个字段，难以管理。

选项 2:使用单个 setState对于整个对象

const [state, setState] = useState<MyState>({
    person: null,
    pet: null,
    loading: false
})

这是我觉得最简单的方法，我可以简单地做 setState((prev) => {...prev, person: {username: 'New', email: 'example@gmail.com'}})或使其适应任何现场修改。我什至可以一次更新多个字段。

选项 3:使用 useReducer对于每个复杂字段，通过为每个字段传递一个特定的 reducer，使用 useState对于简单的

const [person, dispatchPerson] = useReducer<Person>(personReducer)
const [pet, dispatchPet] = useReducer<Pet>(petReducer)
const [loading, setLoading] = useState<boolean>(false)

我发现这个是可以管理的，但我不认为必须使用多行开关设置一个 reduce 函数，除了在 Typescript 中为每个 reduce 函数设置调度类型的繁琐过程，当你可以的时候使用 setState 并完成它。

选项 4:使用一个 useReducer为整个州

const [state, dispatch] = useReducer(generalReducer)

主要问题是 reducer 的类型， 想想 15 个字段，其中所有类型和更新它们的信息的结构都不同 .在 Typescript 中指定类型无法扩展或不清楚。有几篇关于此的文章，但没有一篇以干净的方式解决问题( example 1)，或者它们非常简单，不适用于问题( example 2)。

处理此类案件的最佳方法是什么？该州的字段数量很大并且可以具有多个深度级别。是否有代表这些案例的良好做法或任何官方示例？带有数字字段的示例用于处理博主或官方文档人员非常喜欢的简单计数器并不是很有帮助。

任何关于这个主题的光都将非常受欢迎!在此先感谢，对我的英语感到抱歉

Answer 1

我认为你的观察是正确的。

我认为您应该将选项 1 用于简单状态(例如，您只有几个项目要跟踪)，将选项 2 用于复杂状态(大量项目或嵌套项目)。

选项 1 和 2 也是最具可读性和声明性的。

选项 #2 在这里讨论:https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

当您有多种类型的操作时，useReducer 会更有用。如果您只是更新状态(一种操作)，那么操作就大材小用了。此外，如果您基于先前的状态(不仅仅是替换部分状态)执行计算或转换，那么 useReducer 也很有用。如果你熟悉 Redux，useReducer 是 Redux 原理的简化版。