I am new to Redux and RTKQ and believe that I have missed something. The use case I am going to describe just seems so standard that I cannot believe there isn't an inbuilt solution.

The High Level View:

1. Fetch data from the backend.
2. The user then updates parts of that data.
3. At some point the user clicks a button to persist the changes.

A bit more details
The fetched data is a list of profiles. These profiles have a name and a list of contacts. Here is an example:

[
  {
    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>',
      },
    ],
  },
];

The user can add new profiles, alter existing profiles or contacts and can add new contacts to profiles.

As is typical in react the data structure is displayed with the help of various components. Here is a tree of my current setup:

  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

The EditProfiles component fetches the data from the backend and sends any updates to the server (when the save or delete button is clicked). But how do you correctly persist the updates before sending them?

After fetching the data RTKQ stores it. So far so good. Now the user wants to change part of the fetched data. And here the trouble starts. Where do I store the changes before sending them? I cannot store them as react state bc it's a complex object and there are all kinds of pitfalls if done incorrectly. I could update them in RTKQ but there any changes would be overriden if the query is sent again for any reason. Or, and this is what I ultimately went with: I can create a new slice and persist any changed data there. Because it creates a parallel structure the user's changes are save even if the query is sent again. Any changes to this state also cause a rerender (if listened to) no matter the complexity of the object.

But this has drawbacks of it's own:

1. I have to manually handle this slice, meaning I must make sure to add changes and also to delete them, after the user persisted them. I lose a lot of the neat automatisation of RTKQ.
2. I have to store duplicated data. Most of the time users only want to change part of a object, I still need to store all of it.
3. Because of 1. there is a lot of error potential that I do not have when just using RTKQ.

So the question basically is: Is there a more RTKQ way of solving this I am just unaware of?

CodePudding user response：

You didn't miss anything - the job of RTKQ is to mirror the data you have on the server, and to keep that as sync as possible. It does only that one thing.

I would recommend using some kind of form library (formik, react hook form, react final form, ...) to handle that state while the user is editing it - or, if local state is really not an option, to go for a separate slice.