brocoders / redux-async-connect

It allows you to request async data, store them in redux state and connect them to your react component.
645 stars 103 forks source link

confuse about arguments of loadOnServer #66

Open YDSS opened 8 years ago

YDSS commented 8 years ago

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);
});
YDSS commented 8 years ago

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~