The Suspense is Killing Redux

Washington DC Workshop at Viget, October 4th, 2018

Basic Suspense Setup

  1. React starts rendering (in memory).
  2. It hits that InvoicesResource.read() call.
  3. The cache will be empty for the key (the id is the key) so it will call the function we provided to createResource, firing off the asynchronous fetch.
  4. AND THEN THE CACHE WILL THROW THE PROMISE WE RETURNED (Yeah, I’ve never thought about throwing anything but errors either, but you can throw window if you want.) After a throw, no more code is executed.
  5. React waits for the promise to resolve.
  6. The promise resolves.
  7. React tries to render Invoices again (in memory).
  8. It hits InvoicesResource.read() again.
  9. Data is in the cache this time so our data can be returned synchronously from ApiResource.read().
  10. React renders the page to the DOM

Okay, So What About Redux?

Comparison

  • store → cache
  • mapStateToProps → Resource.read()
  • action → function passed to resource

What about cache invalidation?

It Doesn’t Replace Everything

Attend a Workshop

--

--

--

Making React accessible for developers and their users at https://reach.tech with OSS, Workshops and Online Courses. (Formerly at React Training)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Revisiting Flatiron JavaScript Lab — Task Lister Lite

JavaScript Quiz: is this equal to that?

React Js Most Important Topics

How to make a button in Angular

Quick Start with Tailwind CSS

React Forms : popular packages to handle forms

Hello im Darkflare and I go to Cms

Huawei Map Kit — ISS Detector Sample App

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
Ryan Florence

Ryan Florence

Making React accessible for developers and their users at https://reach.tech with OSS, Workshops and Online Courses. (Formerly at React Training)

More from Medium

How to Access URL Parameters Using React Router 6

React Components

Most Efficient Ways Of Styling React Components: Styled Components & Dynamic Props

How To Easily Test Your React Components