0

I would like to use a redux action as callback to the onChange event in the react-router route. I am also using the react-router-redux.

Something like

<Route path="profile/search" component={ProfileSearch} onChange={store.dispatch(fetchCompanies())} />

where fetchCompanies is the action.

More generally, I would like the to listen to a route change and ultimately interact with the state, that is why using an action seems like the most straightforward option to me. However, I get this error:

Uncaught TypeError: hook.apply is not a function TransitionUtils.js?f913:22

Is there another way to achieve this? Is trying to pass an action as a callback to the route change inherently bad? If not, how can I make it work?

feychu
  • 1,016
  • 11
  • 27
  • Why do you want to do it on router level? – Hareesh Jun 14 '16 at 17:03
  • Just using the `Route` component and `onChange` in order to trigger an api request as a callback (every time that specific route changes, that is). The api request will return some data that I will have to save in the global state. – feychu Jun 14 '16 at 17:15
  • You can do that in component also. Ex : dispatch the action in componentDidMount() life cycle of the react component. – Hareesh Jun 14 '16 at 18:07
  • I would normally do that, but I need this action to be dispatched not only when the component has just mounted, but also when the route changes. The component just mounts initially, not for every change in the route. – feychu Jun 14 '16 at 18:21

1 Answers1

0

Calling store.dispatch throws the error, but wrapping the dispatched action in a function works.

const onChangeProfileSearch = () => store.dispatch(fetchCompanies());
<Route path="profile/search" component={ProfileSearch} onChange={onChangeProfileSearch} />

However, there may be a better approach to this.

feychu
  • 1,016
  • 11
  • 27