How do you dispatch actions from a React component?

Difficulty: 5/10

useDispatch, action creators, thunks

In a React application using Redux Toolkit, you can dispatch actions using the useDispatch hook from react-redux. This hook gives you access to the store’s dispatch function, which you can use to send actions created by your slice to update the state.

Steps to Dispatch Actions in React

1
Import the useDispatch hook from react-redux.
2
Import the action creators from your slice file.
3
Call useDispatch() inside your component to get the dispatch function.
4
Use dispatch(actionCreator()) when you want to trigger a state change.

Example: Dispatching Actions in a React Component

Scenario Questions

0-2 years experience

1You have a button in a TodoItem component that should toggle its completed state. Using Redux Toolkit, how would you dispatch the toggleTodo action when the button is clicked?
2If you forget to wrap your app with the Provider, what will happen when you call useDispatch inside a component?

2-5 years experience

1We need to add a new feature where submitting a form triggers an async thunk that posts data to an API and then updates the store. Walk me through how you'd dispatch that thunk from the form component and handle loading state.

Follow-up Questions

What would you do if the action payload needed data from the component's local state?
How do you test a component that dispatches a thunk?
Can you explain the difference between dispatching a plain action and a thunk in terms of middleware?