A Review Of Redux Tool Kit Query
By: Dillon Erhardt
Tags: Redux, State Management, Frontend, React, React Query

RTK Query — Powerful data fetching and caching solution built on Redux

RTK Query is the latest addition to the Redux family and brings a much needed data fetching solution for apps using Redux to manage client side state.

GitHub: https://github.com/rtk-incubator/rtk-query

Docs: https://rtk-query-docs.netlify.app/

At the time of writing the library is in alpha so expect there to be changes.

Overview

The new library brings a simple data fetching API similar to ReactQuery and SWR that’s powered by Redux under the hood.

In my experience, working on large projects and reading online discussions from developers using Redux day-to-day the biggest issue is the massive flexibility and granular control you have with Redux (sounds like these should good things right?). For managing complex state this flexibility is amazing, but it also leaves you with quite a bit of boilerplate code when you’re doing data fetching.

Just take a look at this article https://blog.logrocket.com/data-fetching-in-redux-apps-a-100-correct-approach-4d26e21750fc/ pretty out of date (although only 2 years old) but it shows just how much code you had to write to handle just the basic states and caching in Redux.

Redux Toolkit was great progress and really reduced the amount of boilerplate code that needed to be written but even in the official docs it’s hard to understand how to setup simple data fetching which most apps will need.

You’re probably thinking that any good developer would just create an abstraction at the beginning of the project but you’d be surprised how often that doesn’t happen for one reason or another. And even if you did, are you handing all the possible states? Are you handling polling, prefetching, re-fetching?

ReactQuery and other similar libraries really filled a gap in this area; provided a really small, simple and consistent way to fetch and cache data. They allowed developers to avoid writing this complex code for every project and focus on building the application.

RTK Query follows these other libraries (better late than never 😉) but with the weight of the larger Redux ecosystem behind it.

Where does it fit?

I think once RTK Query is production ready it will be a pretty good choice for any application.

For apps that just need simple data fetching you can use the library on it’s own with the ApiProvider that will bootstrap the Redux store for you.

Applications that are doing more complex client side state management can setup the library to work with their existing Redux store. This is great as it allows an application to get started with RTK Query and not have to worry about implementing a separate solution or re-writing as they realise they need something more flexible… just setup RTK once you need it!

Conclusion

I’m happy to see the release of this much needed addition to Redux Toolkit and excited to try it out. Really impressed with the time taken to release this with the first commit being only a couple of months ago.

As with most of the Redux project the docs are fantastic and there’s an amazing community behind it which is a massive +1 🔥.

For any apps already using RTK or expecting to need the power of Redux this is a no brainer.

If you only need a data fetching solution then I would still suggest ReactQuery simply because, for now it is the more mature solution and provides a few more features out of the box with a smaller bundle size (7.2kB vs 12.8kB minified + gzipped).