11 ms·
I don't mean promises; thunks are fine, but don't solve the hard problems. I mean actions that start asynchronous processes such as fetching data remotely via X
by lobster_johnson 8y ago
I don't mean promises; thunks are fine, but don't solve the hard problems. I mean actions that start asynchronous processes such as fetching data remotely via XHR.
In the end, such actions tend to be extremely similar. I tend to have groups of related actions that all such actions need. LOAD_FOO_REQUEST, LOAD_FOO_SUCCESS, LOAD_FOO_FAILURE, etc. A middleware can regex-match on the action name and count how many are in flight to render load progress. Similarly, errors can be caught that way.
Idempotency is a bit harder. Often a load action has several dependencies (e.g. you want to load data based on a query and a limit) that need to be encoded in something that represents that request so that if another request is issued, it can be ignored if it's identical. This ends up being boilerplate, too. Maybe one could write a generic middleware that tracked what the in-progress request is and skipped duplicate actions.
Cancelation is harder. I've never done this with Redux, as the biggest blocker is that promises can't be canceled. Last I checked, WhatWG's fetch API doesn't either.
Retrying, ugh. At least this one isn't too hard to make generic, since any Redux action can, in principle, be retried. In a recent project, I rendered a notification box with a retry button if an error event embedded a retry function, which in turn just resubmitted the action. But it wasn't a very general-purpose solution.
- acemarke 8y agoLegitimate question: how would you expect Redux _or_ any other state management framework to solve those problems for you? Or, to phrase it another way: how do other frameworks or libraries actually tackle this problem already, in a way that Redux doesn't? My own apps have been fairly simple in that regard, so while I've seen a bunch of libraries to handle data fetching in various capacities, it's not an area I've had to deal with myself. So, I'm not sure what kind of "other framework handles it this way" comparisons exist.
- lobster_johnson 8y agoIt's not that other frameworks are so awesome at it, either. But other frameworks (e.g. Apple's frameworks such as Cocoa/UIKit, Core Data, etc.) typically don't provide the kind of strict state-machine purity that Redux promotes. These things are just easier to wire together imperatively, because data changes don't necessarily have to be broadcast and "reduced" the way that Redux forces you to. So some of these problems are self-inflicted.
- daveidol 8y agoHave you tried redux-saga? I built several projects without using it (the generators kinda put me off for some reason), but once you actually use it to build a full app you will never go back to thunks. It makes pretty much all the things you listed (cancellation, ignoring identical requests, retry) far, FAR easier to reason about, test, and implement.
- chrisco255 8y agoYeah, or Rx is another option. Many projects use React/Redux/Rx in combination.
- pests 8y agoFacebook's DataLoader helps with deduping data requests. It also maintains a request-scoped cache as well.