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

confuse about arguments of loadOnServer

YDSS opened this issue · comments

redux-async-connect is awesome! But the docs is not very completed. There is nowhere to find docs about api loadOnServerwhich I get trouble with. After debugging, I found the problem is the arguments of loadOnServer. I follow the example:

loadOnServer(renderProps, store).then(() => {

      // 2. use `ReduxAsyncConnect` instead of `RoutingContext` and pass it `renderProps`
      const appHTML = renderToString(
        <Provider store={store} key="provider">
          <ReduxAsyncConnect {...renderProps} />
        </Provider>
      )

      // 3. render the Redux initial data into the server markup
      const html = createPage(appHTML, store)
      res.send(html)
    })

and I found in source code loadOnServer only has one argument(the npm version):

function loadOnServer(args) {
  var result = loadAsyncConnect(args);
  if (result.async) {
    result.promise.then(function () {
      args.store.dispatch((0, _asyncConnect.endGlobalLoad)());
    });
  }
  return result.promise;
}

while in github, it's right with es2015:

export function loadOnServer({ components, params }, store, helpers) {
  return Promise.all(asyncConnectPromises(filterAndFlattenComponents(components), params, store, helpers))
    .catch(error => console.error('reduxAsyncConnect server promise error: ' + error)).then(() => {
      store.dispatch(endGlobalLoad());
    });
}

So which is right? Now I temporarily fix it like this, which also react-redux-universal-hot-example]'s version:

loadOnServer({...renderProps, store}).then(() => {
    const component = (
        <Provider store={store} key='provider'>
            <div>
                <ReduxAsyncConnect {...renderProps} />
            </div>
        </Provider>
    );

    const template = ReactDOM.renderToString(<Html component={component} store={store}/>);

    res.send('<!doctype html>\n' + template);
});

Hi, I found that there are many difference between the npm version with github, and the guide code of github matches the github version, so I guess the github version is the latest one. Please update the npm or I have to use the old api~