state.entities[payload.id] = payload  
        })  
        builder.addCase(updateUser.rejected, (state, action) => {  
          if (action.payload) {  
            // Being that we passed in ValidationErrors to rejectType in `createAsyncThunk`, the payload will be available here.  
            state.error = action.payload.errorMessage  
          } else {  
            state.error = action.error.message  
          }  
        })  
      },  
    })  
      
    export default usersSlice.reducer  
      
    // file: externalModules.d.ts noEmit  
      
    declare module 'some-toast-library' {  
      export function showToast(type: string, message: string)  
    }  
      
    // file: user/UsersComponent.ts  
      
    import React from 'react'  
    import { useAppDispatch } from '../store'  
    import type { RootState } from '../store'  
    import { useSelector } from 'react-redux'  
    import { updateUser } from './slice'  
    import type { User } from './slice'  
    import type { FormikHelpers } from 'formik'  
    import { showToast } from 'some-toast-library'  
      
    interface FormValues extends Omit<User, 'id'> {}  
      
    const UsersComponent = (props: { id: string }) => {  
      const { entities, error } = useSelector((state: RootState) => state.users)  
      const dispatch = useAppDispatch()  
      
      // This is an example of an onSubmit handler using Formik meant to demonstrate accessing the payload of the rejected action  
      const handleUpdateUser = async (  
        values: FormValues,  
        formikHelpers: FormikHelpers<FormValues>,  
      ) => {  
        const resultAction = await dispatch(updateUser({ id: props.id, ...values }))  
        if (updateUser.fulfilled.match(resultAction)) {  
          // user will have a type signature of User as we passed that as the Returned parameter in createAsyncThunk  
          const user = resultAction.payload  
          showToast('success', `Updated ${user.first_name} ${user.last_name}`)  
        } else {  
          if (resultAction.payload) {  
            // Being that we passed in ValidationErrors to rejectType in `createAsyncThunk`, those types will be available here.  
            formikHelpers.setErrors(resultAction.payload.field_errors)  
          } else {  
            showToast('error', `Update failed: ${resultAction.error}`)  
          }  
        }  
      }  
      
      // render UI here  
    }  
    

Last updated  on ** Feb 21, 2024  **

[ Previous  createSlice  ](/api/createSlice) [ Next  createEntityAdapter
](/api/createEntityAdapter)

  * Overview 
  * Parameters 
    * ` type `
    * ` payloadCreator `
    * Options 
  * Return Value 
  * Promise Lifecycle Actions 
  * Handling Thunk Results 
    * Unwrapping Result Actions 
    * Checking Errors After Dispatching 
  * Handling Thunk Errors 
  * Cancellation 
    * Canceling Before Execution 
    * Canceling While Running 
    * Checking Cancellation Status 
    * Reading the Signal Value 
    * Checking if a Promise Rejection was from an Error or Cancellation 
  * Examples 

Docs

  * [ Getting Started ](/introduction/getting-started)
  * [ Tutorials ](/tutorials/overview)
  * [ Usage Guide ](/usage/usage-guide)
  * [ API Reference ](/api/configureStore)
  * [ RTK Query ](/rtk-query/overview)

Community

  * [ Stack Overflow  ](http://stackoverflow.com/questions/tagged/redux)
  * [ Discord  ](https://discord.gg/0ZcbPKXt5bZ6au5t)

More

  * [ GitHub  ](https://www.github.com/reduxjs/redux-toolkit)
  * [ ![Deploys by Netlify](https://www.netlify.com/img/global/badges/netlify-light.svg) ](https://www.netlify.com)

![Redux Logo](/img/redux_white.svg) ![Redux Logo](/img/redux_white.svg)

Copyright © 2015–2024 Dan Abramov and the Redux documentation authors.