Have you ever written code that looks like this?
Maybe you also have error handling or a fancy delayed spinner that adds even more complexity. Writing the same code for every single async task in your project can add a lot of boilerplate, especially if you have a lot of HTTP requests in your application.
Since this is such a common problem, several solutions have already been proposed. In fact, the React team is currently working on building a solution into React itself, through React Suspense. With all these potential solutions, it might seem like
isLoading boilerplate is a solved problem.
I recently released tuxi, which aims to solve the async state boilerplate problem, while still meeting the flexibility requirements I outlined. Though it has a pretty simple API, it does some really cool things:
- Configurable delayed spinners by distinguishing between “pending” tasks and “spinning” tasks.
- Handles scenarios where multiple instances of a request are fired quickly: only the data from the most recently fired request will be returned.
- It can also handle multiple instances of a request where each request’s state is stored and accessed separately.
- Supports Vue and Vuex without reactivity or strict mode errors, via a plugin.
- Has a plugin API that will make it possible to add integration with React and Redux without too much work (open issue for a React plugin here, if you’re interested and want to give a 👍).
Tuxi is still relatively new, but it’s pretty stable. It has 100% passing unit test coverage, and I’m using it in production. Though I don’t have full documentation written yet, you can read the tests for complete usage examples. Also, feel free to create an issue if you have any questions, requests, or suggestions, and I’ll get back to you as soon as I can.
UPDATE (10/11/2018): I wrote the docs.