If route has params, how these params are transferred to redux-async-connect?

[whatifif]

For example, if the route is /widget/:id, how the id value is transferred to redux-async-connect?

[andresgutgon]

If you want to fetch data for your component based on URL params this is how I'm doing it:

@asyncConnect([{
  promise: (options) => {
    const {
      store: { dispatch },
      params: { id },
    } = options;

    return dispatch(loadYourDataWidget(id));
  },
}])

As you can see you have params in options object. You should have the :id passed by URL

[blainegarrett]

@andresgutgon Thank you for posting this. I just found myself needing to figure this out too. I'm newish to ES6, so this syntax threw me off a bit.

For anyone else struggling with this, here is my syntax that currently working.

// Ensure all articles are loaded regardless of route params. Equivalent to: options.store.dispatch
@asyncConnect([{
  promise: ({store: {dispatch}}) => {
    const promises = [];
    promises.push(dispatch(getArticles())); 
    ...
    return Promise.all(promises);
  }
}])

As opposed to:

// Include the route params too - Equivalent to: options.params,  options.store.dispatch
@asyncConnect([{
  promise: ({params, store: {dispatch}}) => {
    const promises = [];
    promises.push(dispatch(getArticleBySlug(params.slug)));
    ...
    return Promise.all(promises)
  }

Here are the full set of properties on that options object passed in.

• store - commonly accessed props dispatch and getState
• params - the route params
• helpers
• matchContext
• router
• history
• location
• routes

[brendanscarano]

Thank you @andresgutgon - this was extremely helpful!

[andresgutgon]

You're welcome :)

[georgegillams]

@blainegarrett Thanks for elaborating with your example. My existing syntax looked more like yours, so this massively helped me!