Trigger all component hooks #38

mrasoahaingo · 2016-10-06T08:57:13Z

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 · 2016-12-21T20:25:50Z

+1

adriaanbalt · 2017-03-03T20:24:11Z

+1

davidfurlong · 2017-03-29T20:11:42Z

I think my answer #47 covers why this wont work

idangozlan · 2017-03-29T22:08:51Z

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

Aryk · 2017-04-16T08:56:25Z

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 · 2017-04-16T09:04:49Z

@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 · 2017-04-16T09:21:42Z

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 · 2017-04-16T09:38:03Z

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

Aryk mentioned this issue Apr 16, 2017

How does redial handle redirects triggered with a decorated component? #50

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trigger all component hooks #38

Trigger all component hooks #38

mrasoahaingo commented Oct 6, 2016 •

edited

Loading

idangozlan commented Dec 21, 2016

adriaanbalt commented Mar 3, 2017

davidfurlong commented Mar 29, 2017

idangozlan commented Mar 29, 2017

Aryk commented Apr 16, 2017

davidfurlong commented Apr 16, 2017 •

edited

Loading

Aryk commented Apr 16, 2017

davidfurlong commented Apr 16, 2017

Trigger all component hooks #38

Trigger all component hooks #38

Comments

mrasoahaingo commented Oct 6, 2016 • edited Loading

idangozlan commented Dec 21, 2016

adriaanbalt commented Mar 3, 2017

davidfurlong commented Mar 29, 2017

idangozlan commented Mar 29, 2017

Aryk commented Apr 16, 2017

davidfurlong commented Apr 16, 2017 • edited Loading

Aryk commented Apr 16, 2017

davidfurlong commented Apr 16, 2017

mrasoahaingo commented Oct 6, 2016 •

edited

Loading

davidfurlong commented Apr 16, 2017 •

edited

Loading