brocoders / redux-async-connect

It allows you to request async data, store them in redux state and connect them to your react component.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

load data deferred

andresgutgon opened this issue · comments

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: erikras/react-redux-universal-hot-example#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

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?

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.

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.

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.

I made a PR to illustrate my issue #63

commented

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;