makeomatic / redux-connect

Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React
MIT License
549 stars 66 forks source link

Delaying rendering/transition #94

Closed kastsiushkin closed 7 years ago

kastsiushkin commented 7 years ago

Hi, I just switched to this project from redux-async-connect. It was rather painless and easy, thank you for that! I'm trying to figure out how to delay transition/rendering of a new page until my data is fetched and ready.

I have ducks like setup and using redux-saga. Do you have an example of integration with similar setup of have some tips? My problem that promise in @asyncConnect decorator is resolved immidiately, without waiting for the data. I found the example below somewhere online, but it has this same issue:

@asyncConnect([{
    key: 'myKey',
    promise: ({store, params}) => Promise.resolve(store.dispatch(duck.getInitialState(params)))
  }])

Thank you

AVVS commented 7 years ago

Well, first thing is that you have to add store enhancers like redux-thunk-fsa and/or redux-promise

Then duck.getInitialState should generate a promise once its dispatched - and that is what you return

Not Promise.resolve (though that would've worked, too) if store.dispatched returned a promise

Your rendering is not delayed just because promise resolves are actually sync actions

kastsiushkin commented 7 years ago

Thank you for explanation. I'm using redux-saga middleware for handling async operations and side-effects. Here is my flow:

  1. store.dispatch(duck.getInitialState) dispatches an action object
  2. Saga's watch generator captures it and fork's another getData generator to get data
  3. getData generator makes a call to an API, waits until data comes back and dispatches getDataSuccess action

I will post updates later, when I fix it.

AVVS commented 7 years ago

as far as I know redux-saga should be able to handle SSR on it's own, without relaying on this module, I would also expore how people do it with that module alone

AVVS commented 7 years ago

though its a bit more complex compared to this one

kastsiushkin commented 7 years ago

Yes, I just realized that I use 2 tools for the same job. I use normalizr inside my saga and handle errors. I guess I have to pick 1 tool to do the job.

kastsiushkin commented 7 years ago

I chose to use redux-connect for loading my initial data and keeping redux-saga for managing other actions. It works like a magic and now I have much less boilerplate code in my ducks.

Thanks a lot for working on this project!