Server-side rendering getData not working when using redux-observable middleware

[christophediprima]

I am using the este.js stack and redux-observable middleware epics to make my API calls and trigger other actions when needed. But the server-side rendering is not waiting for the final result to render the app.

Do you have any idea on how I can make this work?

<Route>
    <Route
      path="/"
      Component={App}
      getData={({ params, context }) =>
        context.store.dispatch({
          type: 'GET_TIMEZONES',
        })}
      render={({ Component, props }) => {
        if (!Component || !props) {
          return 'Loading';
        }

        return <Component {...props} />;
      }}
    >
</Route>

export const setTimezonesEpic = (action$: any, { getState }: Deps) =>
  action$
    .filter((action: Action) => action.type === 'GET_TIMEZONES')
    .mergeMap(() => {
      const baseUrl = getState().config.gatewayServiceBaseUrl;
      const viewer = getState().viewer;
      const headers = buildHeaders({ viewer, jsonBody: false });
      return Observable.from(
        fetch.get({
          headers,
          url: '/users/api/timezones',
          baseUrl,
        })
      )
        .map(timezones => setTimezones(timezones))
        .catch(error => Observable.of(getTimezonesFail(error)));
    });

[taion]

Whatever you have in getData needs to return a promise that doesn't resolve until the data are ready