Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
casertap opened this issue Jun 29, 2016 · 1 comment
Open

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

casertap opened this issue Jun 29, 2016 · 1 comment

Comments

@casertap
Copy link

casertap commented Jun 29, 2016 •
edited
Loading

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@casertap @bertho-zero