How to put RTK query into store/slice?

Question

I just started using RTK query, but facing a problem

My app has all the setting in one big JSON, so I create an RTK query to fetch the setting. In the tutorial, the examples are about using the useQuery hook in the component and immediately display the result, but because the setting is so big that it has multiple pages/components to display it and allow the user to change the setting

Because the setting needs to be changed, so I think it's a good idea to put the state in the store, my question is how can I put the API result into the store?

I can see a couple of methods around it

1. Use useQuery in a component and when it has resulted, then do a dispatch to put the data onto the store

2. put useQuery from API in all components use it and use it to get cached data, then there is no need to put it on the store and use the component state for setting changes (I'm not sure about this approach as there are a lots of settings - even divided across different pages, it doesn't seems right use component state to manage it)

I'm new to RTK and RTK query, just wondering what's the best/good approach?

Answer 1

Using RTK Query implicitly means "putting your data in the store". It creates a store slice that manages all your data for you. You can just use useQuery wherever you need that data and you either get it out of the store or request it new when necessary.

Most of the time you should not copy that data elsewhere as you will have to do stuff like manual cleanup etc. then.

I can also recommend going through the tutorial chapters for RTK-Q that were just added to the official Redux tutorial. They are very in-depth.

https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics

Answer 2

From the docs:

However, when you use RTK Query, there is a mindset shift that happens. We're no longer thinking about "managing state" per se. Instead, we now think about "managing cached data". Rather than trying to write reducers ourselves, we're now going to focus on defining "where is this data coming from?", "how should this update be sent?", "when should this cached data be re-fetched?", and "how should the cached data be updated?". How that data gets fetched, stored, and retrieved becomes implementation details we no longer have to worry about.