Redux Toolkit -我错过了一些基本的东西吗?在将更新发送到后端之前将其存储到复杂对象列表的位置

Question

我是Redux和RTKQ的新手，相信我错过了一些东西。我将要描述的用例看起来太标准了，以至于我无法相信没有一个内置的解决方案。

高层视图:

1. 从后端获取数据
2. 用户然后更新部分数据。
3. 在某个时刻，用户点击一个按钮来保存更改。

更多细节
获取的数据是一个配置文件列表。这些配置文件有一个姓名和联系人列表。下面是一个例子:

[
{
uuid: '<some id>',
name: '<SomeName>',
contacts: [
{
uuid: '<some id>',
label: 'Email',
type: 'email',
value: '<some email>',
},
],
},
{
uuid: '<some other id>',
name: '<SomeName>',
contacts: [
{
uuid: '<some other id>',
label: 'Email',
type: 'email',
value: '<some email>',
},
],
},
];

用户可以添加新的配置文件，修改现有的配置文件或联系人，并可以添加新的联系人到配置文件。

在react中是典型的，数据结构在各种组件的帮助下显示。下面是我当前设置的树状图:

EditProfiles (handles saving/deletion of profiles)
-> ProfileList
-> ProfileListItem (transiently stores changes to the name)
-> EditContacts (transiently stores updates to channels or the creation of new channels)
-> EditContactList
-> EditContactListItem

EditProfiles组件从后端获取数据并将任何更新发送到服务器(当单击保存或删除按钮时)。但是如何在发送更新之前正确地持久化更新呢?

获取数据后，RTKQ将其存储。到目前为止一切顺利。现在，用户想要更改部分已获取的数据。这里麻烦开始了。在发送更改之前，我将更改存储在哪里?我不能把它们存储为反应状态，因为它是一个复杂的对象，如果做得不正确，会有各种各样的陷阱。我可以在RTKQ中更新它们，但如果出于任何原因再次发送查询，则任何更改都会被覆盖。或者，这是我最终采用的方法:我可以创建一个新的片，并在那里保存任何更改的数据。因为它创建了一个并行结构，所以即使再次发送查询，也可以保存用户的更改。无论对象的复杂性如何，对该状态的任何更改都会导致呈现(如果被侦听)。

但是这也有它自己的缺点:

1. 我必须手动处理这个切片，这意味着我必须确保在用户持久化它们之后添加更改并删除它们。我失去了很多RTKQ的整洁自动化。
我必须存储重复的数据。大多数时候，用户只想改变对象的一部分，我仍然需要存储所有的对象。
2. 因为1。我在使用RTKQ时没有很多潜在的错误。

所以问题基本上是:是否有更RTKQ的方法来解决这个问题，我只是不知道?

Answer 1

您没有错过任何东西- RTKQ的工作是镜像服务器上的数据，并尽可能保持同步。它只做一件事。

我建议在用户编辑时使用某种表单库(formik, react hook form, react final form，…)来处理该状态，或者，如果本地状态确实不是一个选项，那么就使用单独的切片。