What's the difference between Redux Toolkit Query vs. Redux Toolkit

Question

What can Redux Toolkit do, or do well in that RTK Query can't? I know that RTQ Query makes it easier to perform data fetching and caching with less code, but why do some projects that has Node.js and MongoDB as backend uses createAsyncThunk() from Redux Toolkit instead of createApi() from RTQ Query?

Answer 1

They are totally different things.

RTK Query is an optional addon included in the Redux Toolkit package. There are also alternative packages such as react-query, swr, See Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router. I think the RTK Query Overview documentation is clear enough.

Why do people(including me) use createAsyncThunk() in their projects may be because RTK Query has a learning cost and they want to keep their project simple and don't want to include too many packages and conceptions.

I write the logic about the data fetching and caching by myself instead of RTK query

RTK provides some APIs to help people address three common concerns about Redux:

• "Configuring a Redux store is too complicated"
• "I have to add a lot of packages to get Redux to do anything useful"
• "Redux requires too much boilerplate code"

In particular, RTK uses immer underly, which greatly reduces the complexity of updating complex states and returning new references.

Answer 2

Internally, createApi will call the Redux Toolkit createSlice API to generate a slice reducer and corresponding action creators with the appropriate logic for caching fetched data. It also automatically generates a custom Redux middleware that manages subscription counts and cache lifetimes.

with createApi we create an api (this is not a backend code) and we get hooks (it also returns slice and thunks) from that api. Hooks automate the data fetching process. Basically, an api talks to one server so keeping all fetching logic in one function will keep your app neat. (But we need to do alot of configuration) All the endpoints will be in one spot so you see everything in one look. (compare it to node.js api logic, creating controllers in different files, how hard it is keep tracking of api requests) The communication (automated refetching, invalidating cache) between those fetchers is perfectly done under createApi.

with react toolkit query we are not only handling state management but also handling data fetching and caching, efficiently. If two components on a single page are making a network call to the same endpoint defined in RTK Query, it detects that and makes one single call instead. On the other hand, Redux toolkit is the same as react-redux but the only difference is redux toolkit (with using immer.js behind the scene) makes it write the same logic shorter and more secure.

Basically, react toolkit query is built on top of the redux toolkit. The logic is defining the data fetching first and then generating all the slice logic, reducers, middlewares, isLoading state based on those data fetching functions.

Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router

this link will show all the properties of the RTK Query