I’ve been using Redux Toolkit for a while with async thunks making calls using Axios. I find it super convenient that calling the thunk in dispatch
directly saves my response in the store, allowing me to use it throughout the app wherever I want.
This approach, however, always required manual loading states and error handling.
Recently, I heard good things about RTK Query, especially its provided loading and error states, and the additional benefit of no longer needing Axios, which is one less library in the bundle.
Since I started working more with RTK Query, there have been some aspects that don’t make sense to me. For example, similar to asyncThunk, RTK Query saves the returned data to the store, but it also stores a lot of other properties I don’t really need.
If I want to access the data I fetched from the API, do I have to get it like this?
const data = useSelector((state: any) => state.todoAPI.queries.getTodos);
This seems like a lot of object drilling just to get the response of an API call. On top of that, I don’t need data like status
, startedTimestamp
, and fulfilledTimestamp
stored in the Redux store. Why do I have to carry these in the state?
Is there a way to simplify accessing just the response data and avoid storing unnecessary properties in the state? Any guidance or best practices would be greatly appreciated!