Advanced Concepts in Redux Toolkit

RTK Query

RTK Query is a powerful data fetching library built on top of Redux Toolkit. It simplifies the process of making API requests and managing data in a Redux store. RTK Query provides a set of utilities to define and manage API endpoints and automatically handles fetching, caching, and state updates for you.

With RTK Query, you can define an API slice that specifies your API endpoints and their methods. The library generates corresponding actions and reducers, enabling seamless data fetching and caching.

Here's a basic example of using RTK Query:

    // apiSlice.js

    import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

    export const apiSlice = createApi({
      baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
      endpoints: (builder) => ({
        getUsers: builder.query({
          query: () => '/users',
        }),
        addUser: builder.mutation({
          query: (userData) => ({
            url: '/users',
            method: 'POST',
            body: userData,
          }),
        }),
      }),
    });
  

createAsyncThunk

createAsyncThunk is a utility function provided by Redux Toolkit that simplifies handling asynchronous actions. With createAsyncThunk, you can easily define async logic and handle loading, success, and error states without writing separate action creators and reducers for each case.

Here's an example of using createAsyncThunk:

    // userSlice.js

    import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
    import userService from 'services/userService';

    export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
      const response = await userService.getUser(userId);
      return response.data;
    });

    const userSlice = createSlice({
      name: 'user',
      initialState: { data: null, status: 'idle', error: null },
      reducers: {},
      extraReducers: (builder) => {
        builder
          .addCase(fetchUser.pending, (state) => {
            state.status = 'loading';
          })
          .addCase(fetchUser.fulfilled, (state, action) => {
            state.status = 'succeeded';
            state.data = action.payload;
          })
          .addCase(fetchUser.rejected, (state, action) => {
            state.status = 'failed';
            state.error = action.error.message;
          });
      },
    });

    export default userSlice.reducer;
  

createEntityAdapter

createEntityAdapter is a utility provided by Redux Toolkit for managing normalized data in a Redux store. It simplifies the process of creating entity-related reducers, selectors, and actions for entities with unique IDs.

Using createEntityAdapter, you can define an entity adapter that generates the necessary reducers and selectors to work with normalized data. It is particularly useful when dealing with entities that have relationships with each other.

Here's an example of using createEntityAdapter:

    // postSlice.js

    import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';

    const postsAdapter = createEntityAdapter({
      selectId: (post) => post.id,
      sortComparer: (a, b) => b.date.localeCompare(a.date),
    });

    const postSlice = createSlice({
      name: 'posts',
      initialState: postsAdapter.getInitialState(),
      reducers: {
        addPost: postsAdapter.addOne,
        updatePost: postsAdapter.updateOne,
        removePost: postsAdapter.removeOne,
      },
    });

    export const { addPost, updatePost, removePost } = postSlice.actions;
    export default postSlice.reducer;
  

Conclusion

Redux Toolkit offers advanced concepts like RTK Query, createAsyncThunk, and createEntityAdapter that significantly simplify Redux development. With these utilities, handling data fetching, asynchronous actions, and normalized data becomes more efficient and less error-prone. Consider adopting these advanced concepts in your Redux applications to take advantage of Redux Toolkit's full potential and enhance your development experience.