Introduction to Redux Toolkit + RTK Query

‍

Redux has long been the go-to library for managing global state in React applications.

However, with time, the popularity of Redux fell due to the complexity of configuring a store and also the fact that Redux requires too much boilerplate code.

In this article, we will go into how Redux Toolkit solves these problems.

‍

Redux Toolkit to the rescue 🫡

It aims to eliminate the first two of these pain points by providing an opinionated, convenient, and beginner-friendly approach to Redux development. Some of the crucial features that it includes are:

configureStore: sets up a well-configured Redux store with a single function call, including combining reducers, adding the thunk middleware, and setting up the Redux DevTools integration. It also is easier to configure than createStore, because it takes named options parameters.

createSlice: lets you write reducers that use the Immer library to enable writing immutable updates using "mutating" JS syntax like state.value = 123, with no spreads needed. It also automatically generates action creator functions for each reducer, and generates action type strings internally based on your reducer's names. Finally, it works great with TypeScript.

createAsyncThunk: allows you to start an API call in response to an action and dispatch another action when the call completes.

createEntityAdapter: returns a set of prebuilt reducers and selector functions for performing CRUD on an entity.Let's see how some of these features address these problems through a simple example, one with Redux and another with Redux Toolkit.

‍

‍

‍

As you can see all of the action creators and action types are generated automatically, and the reducer code is shorter and easier to understand. It's also much more clear what's actually being updated in each case.

Handling async Redux flows

As we said Redux Toolkit sets up a well configured Redux store with the thunks middleware to handle async logic. But writing async logic with thunks can be somewhat tedious, each thunk typically requires defining three different action types + matching action creators for "pending/fulfilled/rejected", plus the actual thunk action creator + thunk function. There's also edge cases with error handling to deal with.

Redux Toolkit has a createAsyncThunk API that abstracts the process of generating those actions, dispatching them based on a Promise lifecycle, and handling the errors correctly. It accepts a partial action type string (used to generate the action types for pending, fulfilled, and rejected), and a "payload creation callback" that does the actual async request and returns a Promise. It then automatically dispatches the actions before and after the request, with the right arguments.An example of this could be fetching a list of todos and rendering them in the UI.

‍

‍

‍

This is great! We are dispatching the getTodos action and rendering in the interface what we want based on its status. Great but not so great, this has a downside.

As the app grows you will notice that you are defining a bunch of selectors to access the data from your components, and repeating the fetching status cases for your API calls over and over again.

But how can I solve that…? Well, Redux Toolkit comes with a great library for this.

‍

RTK Query

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself. It is included within the installation of the core Redux Toolkit package and it auto-generates hooks for your endpoints.

‍

Let’s see the previous example but now using RTK Query to demonstrate how great it is.

‍

‍

That’s all for this article, we covered how Redux Toolkit solves the common problems of Redux, went through some of the main features that it provides, and simplifies the data fetching process using RTK Query. We hope you've found this article useful.

Thanks for reading!