Trigger all component hooks

mrasoahaingo commented 7 years ago

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!

idangozlan commented 7 years ago

+1

adriaanbalt commented 7 years ago

+1

davidfurlong commented 7 years ago

I think my answer https://github.com/markdalgleish/redial/issues/47 covers why this wont work

idangozlan commented 7 years ago

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

Aryk commented 7 years ago

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 7 years ago

@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 7 years ago

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 7 years ago

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

markdalgleish / redial

Trigger all component hooks #38