Questions
15 of 18
11. What is a thunk in Redux?
22. What is the difference between redux-thunk and createAsyncThunk?
33. How does createAsyncThunk simplify async actions?
44. What are the lifecycle actions automatically created by createAsyncThunk?
55. How do you handle pending, fulfilled, and rejected states in slices?
66. What are the advantages of using createAsyncThunk over manual thunks?
77. How do you pass parameters to a thunk function?
88. How do you handle API errors inside a thunk?
99. How can you cancel a running thunk or API call?
1010. How can you chain multiple async thunks?
1111. How can you use getState and dispatch inside a thunk?
1212. How do you use thunks in combination with RTK Query?
1313. How do you test thunks and async actions?
1414. What are best practices for organizing async logic with thunks?
1515. How do you dispatch a thunk from a React component using hooks?
1616. How do you manage loading indicators with thunks?
1717. What’s the performance implication of using too many thunks?
1818. How can you refactor thunk-based APIs to RTK Query-based APIs?
RTKRTK
Basics
Slice
Actions
Reducers
RTK Query
Store
Thunk
Scenario Based
15 / 18

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

Dispatching a Thunk from a React Component Using Hooks

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.

Steps to Dispatch a Thunk with Hooks
  1. 1

    1. Import useDispatch: Get the dispatch function using the useDispatch hook from react-redux.

  2. 2

    2. Dispatch the Thunk: Call dispatch(yourThunk(args)) inside an event handler or useEffect.

  3. 3

    3. Handle Results with unwrap(): If you need to access the fulfilled value or catch an error, use the thunk’s unwrap() method.

Example: Dispatching a Thunk from a React Component

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