search

markdalgleish / redial

Universal data fetching and route lifecycle management for React etc.
1.1k stars 42 forks source link

Prevent route switch on client until `fetch` has resolved #19

Closed mwildehahn closed 8 years ago

mwildehahn commented 8 years ago

Is there a way to guarantee that fetch will be called on the client side before rendering a component?

From: https://github.com/markdalgleish/redial#example-client-usage as well as from what I'm seeing happen, the actions just get dispatched, which makes sense given that we're just listening on the history.

It would be nice if fetch for the client and server both had the same guarantee that it would be loaded before the component.

jaredpalmer commented 8 years ago

+1

markdalgleish commented 8 years ago

This is a deliberate decision. I've built apps that work the way you describe and, while it definitely simplified development, they just felt slow.

The project I'm currently working on, which was where redial was extracted from, is built on the assumption that each route needs to handle its own loading state so that navigating between routes is instant.

Maybe look into React Resolver? I believe it works the way you want.

mwildehahn commented 8 years ago

yea i was more just caught off guard because i was developing just looking at the server side first so had the expectation that the component had all the data it needed and then started seeing the errors on the client.

i'm not a of the complexity of the other solutions out there, i love how simple and easy to track this one is. i also agree that the other solution is weird, if i click a link i expect a transition, not waiting for something i can't see.

maybe just adding a note above the implementation to call out that the client side doesn't guarantee data to be present?

svrcekmichal commented 8 years ago

@mhahn @jaredpalmer I have created similar library to redial, called reasync. It was extracted from my personal project and I found it quite usefull. There is possible to pre and defer any async action, like fetching.

Like @markdalgleish said, with prefetching app looks quite slow, but we were able to create simple redux actions and reducer for global transition state, so we can show to users that transition is happening.

I liked the idea of pre and defer because you can always show something to user, when transition happen and defered fetching is still showing loading bars