15. How do you dispatch a thunk from a React component using hooks?

Question

Accepted Answer

In Redux Toolkit, you can dispatch a thunk directly from a React component using the `useDispatch` hook. Since thunks are functions that return a promise, you can also use `async/await` or `unwrap()` to handle their results and errors cleanly. **1. Import useDispatch:** Get the `dispatch` function using the `useDispatch` hook from `react-redux`. **2. Dispatch the Thunk:** Call `dispatch(yourThunk(args))` inside an event handler or `useEffect`. **3. Handle Results with unwrap():** If you need to access the fulfilled value or catch an error, use the thunk’s `unwrap()` method. import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchUserData } from './userSlice'; const UserProfile = ({ userId }) => { const dispatch = useDispatch(); const { data, status, error } = useSelector((state) => state.user); useEffect(() => { dispatch(fetchUserData(userId)); }, [dispatch, userId]); const handleRefresh = async () => { try { const result = await dispatch(fetchUserData(userId)).unwrap(); console.log('User data refreshed:', result); } catch (err) { console.error('Failed to refresh user data:', err); } }; if (status === 'loading') return

Loading...

; if (status === 'failed') return

Error: {error}

; return (

{data.name}

); }; export default UserProfile; By combining thunks with React hooks, you can easily trigger asynchronous actions from components while keeping the UI responsive and Redux logic clean.

15. How do you dispatch a thunk from a React component using hooks?

Dispatching a Thunk from a React Component Using Hooks

15. How do you dispatch a thunk from a React component using hooks?

Dispatching a Thunk from a React Component Using Hooks

Scenario Questions

Follow-up Questions