redux-async-connect icon indicating copy to clipboard operation
redux-async-connect copied to clipboard

load data deferred

Open andresgutgon opened this issue 9 years ago • 6 comments
trafficstars

Hi, I'm trying to figure out how to fetch 2 things: 1 always on server and client, and the second one only on server. I'm trying to follow this code: https://github.com/erikras/react-redux-universal-hot-example/pull/928

But if I do in that way, with filter only on client I always fetch both things. Because it's not filtered on server code in any way.

I've tryed to add filter on loadOnserver function in this way:

      loadOnServer(
        {
          ...renderProps,
          store,
          helpers: {client},
          filter: (item) => !item.deferred,
        }
      ).then(() => {

and deferred thing looks like this:

@asyncConnect([{
  deferred: true,
  promise: (options) => {
    return options.store.dispatch(loadDeferredThing(options.params.id));
  },
}])

And it works! It do not make this request (loadDeferredThing) on server.

The problem is not doing on client neither :/

Only when I go to other place in the app and back both request are done

andresgutgon avatar Feb 28 '16 19:02 andresgutgon

Hi, I'm trying to figure out how to fetch 2 things: 1 always on server and client, and the second one only on server.

in this case (all on server and some on client) you need to implement filter only on client.

do yo use the latest 1.0.x branch version?

sars avatar Feb 29 '16 13:02 sars

Yes, I'm using version 1.0.0-rc2.

Now I removed filter from server and added to <ReduxAsyncConnect/> component on client.

But request is done on server because when page render I do not see that request on Network panel on Chrome Dev Tools.

andresgutgon avatar Feb 29 '16 13:02 andresgutgon

I don't khow how filtering on the client is not allowing to fetch deferred resources on the server.

I've check your code and I don't see it.

andresgutgon avatar Feb 29 '16 20:02 andresgutgon

I'm on rc4 v1. I can see that when async connect hight order component load checks if there was already loaded on the server: https://github.com/Rezonans/redux-async-connect/blob/v1/modules/ReduxAsyncConnect.js#L110

So if I filter on the server this way:

@asyncConnect([{
  deferred: true,
  promise: (options) => {
    return options.store.dispatch(loadDeferredThing(options.params.id));
  },
}])

loadDeferredThing won't be loaded at all. But if I filter it only on the client on the server that data will be fetched. So that do not works for me. Because I want not to fetch loadDeferredThing on the server.

andresgutgon avatar Mar 13 '16 11:03 andresgutgon

I made a PR to illustrate my issue https://github.com/Rezonans/redux-async-connect/pull/63

andresgutgon avatar Mar 13 '16 12:03 andresgutgon

In RC4, it looks like the filter parameter has moved from <ReduxAsyncConnection> to loadOnServer

function loadOnServer(args) {
  var result = loadAsyncConnect(args);

function loadAsyncConnect(_ref) {
  var components = _ref.components;
  var _ref$filter = _ref.filter;
  var filter = _ref$filter === undefined ? function () {
    return true;
  } : _ref$filter;

djeeg avatar Apr 02 '16 00:04 djeeg