geowarin/boot-react

Handling async state

pulse00 opened this issue · 6 comments

pulse00 commented

I'm wondering what's the best approach to generically handle async state in combination with react-router and redux for showing a loading spinner during backend requests.

Do you have any recommendations?

geowarin commented

Excellent question.
To be honest, I'm still trying to figure out the best way to do this.
Here are some libraries that all aim at solving that problem of getting props asynchronously:

React-resolver has support for @client(Loader) where Loader is a component that will handle loading. But it is not documented apparently. See this and this.
The author is still working on a redux example.

Redux-async-connect obviously supports redux but I don't know how it handles loading.

...Some more libs that I like bit less:

That being said... All those libs are dealing with the problem of supporting universal applications (rendered on the server first).
In this project, the privateRoute aims to resolve that problem.

I think with a good middleware, some higher order reducers and some higher-order components, one can come up with a custom solution.

I'm sorry if I cannot provide further guidance on this, I'm working on an application with no data loading at the moment. But solving that problem is definitely on the TODO-list 😄

Let me know how you tackle this problem and I'll do the same when I have so more time to investigate.

geowarin commented

If you want to stay very simple and lean, you can load all the data you need in a root container. Like it's done in this application (getSession in the App container).

pulse00 commented

Thanks a lot for your feedback - interesting links! I'll get back to you when we've decided what approach we'll take.

geowarin commented

Any progress @pulse00 ?

I've just came across redux-task which looks cool.
http://sskyy.github.io/redux-task/index.html

geowarin commented

Hi @pulse00!
I've published an article about shastajs.
It is not stable yet but it does solve the problems you mentioned in a very elegant way.

I'm going to close this issue. Do not hesitate to ping me to keep me updated on your progress!

I'm also working on boot-react-simple which aims to simplify the frontend with the newest additions in the React ecosystem.

pulse00 commented

@geowarin sorry for delayed answer. thanks for pointing out shastajs! We've currently built our own solution as shasta looks rather experimental at this time. Basically we've created a higher order component for async components which render a loader when no data is there yet and re-renders as soon as the store changes the state after loading the backend data.

We'll probably migrate to some more generic solution like shasta in the future.