markdalgleish/redial

Trigger all component hooks

mrasoahaingo opened this issue · 8 comments

mrasoahaingo commented

Does Redial supports multiple trigger when many components is displayed on the same page? It's on an universal implementation

For example:

article.js

@provideHook({
  fetch: //...
})
class ArticlePage extends React.Component {
  //...
  render() {
    return (
        <article>
          ...
          <List/>
        </article>
    )
  }
}

list.js

@provideHook({
  fetch: //...
})
class List extends React.Component {
  //...
  render() {
    return (
        <ul>
          ...
        </ul>
    )
  }
}

client.js

      const { components } = renderProps;
      const { dispatch } = store;
      const locals = {
        path: renderProps.location.pathname,
        query: renderProps.location.query,
        params: renderProps.params,
        dispatch
      };

      if (window.__INITIAL_STATE__) {
        delete window.__INITIAL_STATE__;
      } else {
        trigger('fetch', components, locals);
      }

      trigger('defer', components, locals);

server.js

      const locals = {
        path: renderProps.location.pathname,
        query: renderProps.location.query,
        params: renderProps.params,
        dispatch
      };

      trigger('fetch', components, locals)
        .then(() => {

          const html = template({
            root: renderToStaticMarkup(
              <Provider store={store}>
                <RouterContext {...renderProps} />
              </Provider>
            ),
            initialState: getState(),
            jsBundle: clientAssets.main.js,
            cssBundle: clientAssets.main.css,
          });

          response.status(200).send(`<!doctype html>${html}`);

        }, () => {
          response.status(503).send('Fail on fetching data');
        })
        .catch(() => {
          response.status(500).send('Fail on fetching data');
        });

Thanks for your help!

davidfurlong commented

I think my answer #47 covers why this wont work

idangozlan commented

it's cover why this won't work but it doesn't helped us at all :)

Aryk commented

Hey guys, I opened up a related ticket, but I'm trying to get this working with a decorated top level component and redirects if the user is not logged in. Anyways to get this fetching data only if they are logged in? My guess is not since this library only knows the route and the top level component and not whether an auth check was passed further down.

davidfurlong commented

@Aryk you could pass the auth state into locals and then conditionally load. I don't know how you're doing routing, but I would recommend doing the auth redirect logic elsewhere (react-router has onEnter which is useful)

Aryk commented

Hi @davidfurlong , I think I understand what you are saying, basically, I will need to pull the auth data from the state and check against that. However, this seems a little duplicative because the logic for this is in the decorated component as well, but I think I could manage that.

davidfurlong commented

@Aryk as I said, I wouldn't recommend doing it by passing auth into redial locals, but it will work.