Performing an action within the Redux RTK API Slice

Question

Performing an action within the Redux RTK API Slice

Is it feasible to trigger an action from a different reducer within the API Slice of Redux RTK? Let's say I have this scenario:

getSomething: builder.query<SomeProps, void>({
        query: () => ({
            url: "...",
            headers: {
                'Content-Type': 'application/json',
            }
        }),

Could I incorporate something like onSuccess in it (assuming that getSomething() yields a 200 or any successful response)?

getSomething: builder.query<SomeProps, void>({
        query: () => ({
            url: "...",
            headers: {
                'Content-Type': 'application/json',
            }
        }),
        onSuccess: (response: SomeProps, {dispatch}) => {
            dispatch(someActionFromAnotherReducer(response))
        }

typescript rtk-query

Answer 1

Answer №1

To achieve this, you can utilize the onQueryStarted function.

This function is triggered when each individual query or mutation begins. It receives a lifecycle API object with properties like queryFulfilled, enabling code execution at different stages of a query/mutation's lifecycle (such as start, success, and failure).

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import { messageCreated } from './notificationsSlice'

export interface Post {
  id: number
  name: string
}

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  endpoints: (build) => ({
    getPost: build.query<Post, number>({
      query: (id) => `post/${id}`,
      async onQueryStarted(id, { dispatch, queryFulfilled }) {
        // `onStart` side-effect
        dispatch(messageCreated('Fetching post...'))
        try {
          const { data } = await queryFulfilled
          // `onSuccess` side-effect
          dispatch(messageCreated('Post received!'))
        } catch (err) {
          // `onError` side-effect
          dispatch(messageCreated('Error fetching post!'))
        }
      },
    }),
  }),
})

For more information, refer to: RTK Query: dispatch inside query or mutations

Answer 2

To achieve this, you can utilize the onQueryStarted function.

This function is triggered when each individual query or mutation begins. It receives a lifecycle API object with properties like queryFulfilled, enabling code execution at different stages of a query/mutation's lifecycle (such as start, success, and failure).

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import { messageCreated } from './notificationsSlice'

export interface Post {
  id: number
  name: string
}

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  endpoints: (build) => ({
    getPost: build.query<Post, number>({
      query: (id) => `post/${id}`,
      async onQueryStarted(id, { dispatch, queryFulfilled }) {
        // `onStart` side-effect
        dispatch(messageCreated('Fetching post...'))
        try {
          const { data } = await queryFulfilled
          // `onSuccess` side-effect
          dispatch(messageCreated('Post received!'))
        } catch (err) {
          // `onError` side-effect
          dispatch(messageCreated('Error fetching post!'))
        }
      },
    }),
  }),
})

For more information, refer to: RTK Query: dispatch inside query or mutations

Performing an action within the Redux RTK API Slice

Answer №1

Similar questions

angular component that takes a parameter with a function

Completing a fetch promise and sending the outcome to a function that is not awaited

What is the recommended TypeScript type to be returned from a GraphQL resolver when using ESLint?

Error: Angular 6 resolve consistently returns undefined

Deleting the last item from an array in Typescript

ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Unit testing Angular components can often uncover errors that would otherwise go unnoticed in production. One common

Having some issues with ng-hide in angular, it doesn't seem to be functioning properly

Can we verify if this API response is accurate?

How can we achieve a seamless fade transition effect between images in Ionic 2?

What is the correct way to integrate knex using inversify?

Deactivate the button permanently upon a single click

Error: unable to access cordova in Ionic 2Another wording for this error message could be:

An issue occurred while attempting to retrieve Firebase data using an HTTP GET request

Dealing with Cross-Origin Resource Sharing problem in a React, TypeScript, Vite application with my .NET backend

"Converting to Typescript resulted in the absence of a default export in the module

React Formik - application triggers an undesired submission request when the Enter key is pressed in the input field

What method can be used to verify if a username exists within Angular data?

An unusual problem encountered while working with NextJS and NextAuth