universal-react-redux-starter-kit icon indicating copy to clipboard operation
universal-react-redux-starter-kit copied to clipboard

Is there a way to wait for API response before server will render a page?

Open kuatro opened this issue 8 years ago • 14 comments

Hello! I found that server isn't waiting for async API response, and sends blank components to front-end.

kuatro avatar Oct 03 '16 10:10 kuatro

Hi! I'll have a look at it soon, probably tomorrow.

janoist1 avatar Oct 04 '16 18:10 janoist1

What do you think about this approach? bananaoomarang/isomorphic-redux

The only confusing thing for me is adding a needs array to each container.

kuatro avatar Oct 06 '16 07:10 kuatro

I'll check it later in the weekend and come back to you. Thanks for the link.

janoist1 avatar Oct 07 '16 08:10 janoist1

I've checked it. It's a nice solution, I might implement it into this starter kit once I have some time. ;-)

janoist1 avatar Oct 09 '16 23:10 janoist1

also have the same question

bodyno avatar Oct 19 '16 07:10 bodyno

@bodyno I think we could help @janoist1. Currently I'm working on integration redux-saga in this boilerplate, but I haven't much free time. Could you implement something like the example that I've posted above?

kuatro avatar Oct 19 '16 08:10 kuatro

@kuatro I'm not so familiar with the universal react. Please tell me how to call dispatch action at server side.

bodyno avatar Oct 19 '16 08:10 bodyno

It looks like I'll have some time in the upcoming weekend, will try to implement an async example and do some general updates. ;)

janoist1 avatar Oct 19 '16 09:10 janoist1

:+1: :+1: :+1:

bodyno avatar Oct 19 '16 09:10 bodyno

@janoist1 Please just give me some train of thought how to call dispatch action at server side

bodyno avatar Oct 19 '16 14:10 bodyno

@bodyno I'm not sure what you wanna achieve but guessing you want a point where you can initiate your (async) API request. I chose route onEnter callback as starting point:

import Weather from './containers/WeatherContainer'
import { fetchWeatherData } from './modules/weather'

export default store => ({
  path: 'weather',
  component: Weather,
  onEnter: () => {
    // async get weather data
    store.dispatch(fetchWeatherData())
  }
})

I'm working on an async example that runs on server side. I'm not far from getting it done. ;-)

janoist1 avatar Oct 24 '16 13:10 janoist1

@kuatro if you can show me exactly what needs to be done, I'm personally interested in fixing this and don't mind submitting a PR to make it happen

peterpme avatar Nov 15 '16 23:11 peterpme

Hey, @peterpme . As I understood, when you build an isomorphic React/Redux app, you need to implement your own promise middleware to resolve all API requests on server-side. I've sent a link above: bananaoomarang/isomorphic-redux

kuatro avatar Nov 16 '16 05:11 kuatro

@janoist1 mind closing out this issue and direct folks to #19?

peterpme avatar Nov 24 '16 19:11 peterpme