3 ms·
This is a really great visual! In my experience, the toughest thing to grasp about Flux was how to handle async server actions. It's something that a lot of tu
by morley 11y ago
This is a really great visual!
In my experience, the toughest thing to grasp about Flux was how to handle async server actions. It's something that a lot of tutorials (including, unfortunately, this graphic) handwaves, but it's one of the first things you need to nail down if you want to do anything exciting in an SPA.
The todos usually make it seem like you have to to have this flow of information:
ActionCreator -> ApiUtil -> ActionCreator -> Store
...but if you use the same action creator, you end up with a circular dependency. So you actually have to create a separate file of ServerActionCreators, that are only called with ApiUtils:
ViewActionCreator -> ApiUtil -> ServerActionCreator -> Store
This seems like a lot of boilerplate. At my job, we've simplified this a lot by using Reflux, which has async actions that run one Store callback when a call gets initiated, and another related one when it gets completed. But it's not ideal.
Personally, I'd rather see a bigger app than a TodoMVC implementation with a "correct" example of async server actions.
- aggronn 11y agoThere is some amount of boilerplate with rolling your own, but I think people might benefit from rolling their own flux implementation when they first try to play with react. The best solution I think for this is to have multiple dispatches in your actions. Create action -> action[dispatch 'action pending' -> async action -> dispatch 'action complete with data'] -> stores. Keep your stores completely sync, and the data in a single object, and maybe have them all be pure functions, and suddenly there is no web of anything and theres a single source of truth, and bam. nice.
- dugmartin 11y agoReflux has nice support for async actions. Documentation here: https://github.com/reflux/refluxjs#asynchronous-actions https://github.com/reflux/refluxjs#asynchronous-actions