How to handle Async operations with Redux

Why do we use Redux?

What is a Redux Store?

Who created Redux?

Where is Redux used?

Dispatching Async Actions using Redux

How to handle Async Actions in Redux

Which Async Redux Middleware should you pick?

Why Redux Thunk?

How to implement Redux Thunk?

  • uploadBreeds: Will be used as a dump of all the payload information regarding the dog breeds.
  • uploadBreedImage: Will be used to uploading certain breeds specific images, if needed.
  • loadingState: Will be used to updating the status of the request.
  • selectBreeds: Returns an array of all the breeds in store.
  • selectBreedImage: Returns the image for a specific breed.
  • isLoading: Returns the status of the request
  1. Component is mounted
  2. Loading State is set to Request with one dispatch of an action
  3. Data is requested using a simple fetch
  4. Data is received from the API and processed to the object we want
  5. Breed information in the slice is set to what we got using another dispatch
  6. Loading State is set back to Waiting

In the end, what to pick to handle async operations in Redux?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imaginary Cloud

Imaginary Cloud

202 Followers

Applying our own Product Design Process to bring great digital products to life | www.imaginarycloud.com