markdalgleish/redial

Integrate with clientMiddleware of the react-redux-universal-hot-example

casertap opened this issue · 1 comments

casertap commented

I am trying to replace redux-async-connect by redial in the react-redux-universal-hot-example and I do not want to use the decorator pattern.

I am having a lot of trouble doing that.
Here is part of my server.js

  match({ history, routes: getRoutes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => {
    if (redirectLocation) {
      res.redirect(redirectLocation.pathname + redirectLocation.search);
    } else if (error) {
      console.error('ROUTER ERROR:', pretty.render(error));
      res.status(500);
      hydrateOnClient();
    } else if (renderProps) {
      const { components } = renderProps;
      const locals = {
        path: renderProps.location.pathname,
        query: renderProps.location.query,
        params: renderProps.params,
        location: renderProps.location,
        store: store,
        dispatch: store.dispatch,
        helpers: {client}
      };
      trigger('fetch', components, locals).then(() => {
        const component = (
          <Provider store={store} key="provider">
            <ReduxAsyncConnect {...renderProps} />
          </Provider>
        );
          res.status(200);
          global.navigator = {userAgent: req.headers['user-agent']};
          res.send('<!doctype html>\n' +
                   ReactDOM.renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}/>));
      });
    } else {
      res.status(404).send('Not found');
    }
  });
});

now one of my component looks like this:


const hooks = {
  fetch: ({ store: { dispatch }, location }) => dispatch({ promise: (store) => {
      const promises = [];
      const url = new URI(location.pathname)
              .search(location.search);
      promises.push(dispatch(loadSearch({ q: unlinkify(url.filename()) })));
      return Promise.all(promises);
    }
                                                           })
};
export default provideHooks(hooks)(connect(mapStateToProps, mapDispatchToProps)(Search));

I am getting this error:

[1] TypeError: Invalid attempt to destructure non-iterable instance
[1]     at /Users/pc/workspace/working/pc/js/react/react-redux-universal-hot-example/node_modules/babel-runtime/helpers/slicedToArray.js:48:13
[1]     at clientMiddleware.js:2:56

The problem come from the clientMiddleware that the hot example use to go thought the different steps: [LOAD, LOAD_SUCCESS, LOAD_FAIL]
https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/redux/middleware/clientMiddleware.js

What should I do to make it work?

bertho-zero commented

This is integrated with react-router 4 in my fork : https://github.com/bertho-zero/react-redux-universal-hot-example