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.

#react #redux