Dispatch Actions with the useDispatch Hook in Redux

Share this video with your friends

Send Tweet

Our app is currently updating both the amount and currency code values using callback functions created in the ExchangeRate component and passed down to child components through props. With redux we can avoid this indirection.

useDispatch() takes no arguments and simply returns a dispatch function which can be used to fire actions into your reducers.

Actions dispatched are encouraged to follow the Flux-Standard-Action style: https://github.com/redux-utilities/flux-standard-action#flux-standard-action

Note:

The last 1 minute of this video is just me ranting about two things:

  1. How nicely redux hooks work alongside the built-in react hooks
  2. How much cleaner our parent ExchangeRate component is after giving each child component the power to dispatch its own actions.

You can learn more about all of the redux hooks here: https://react-redux.js.org/api/hooks