Bind specific redux action to one Route using react-router / react-router-redux

Question

I am currently developing an application in react using redux, react-router (with pushState History) and react-router-redux. What i am currently doing is that i am binding my routes to specific components, like i saw as best practice in every documentation:

export default function (store) {
  return <Route path='/' component={CoreLayout}>
    <Route path="feed" components={{content: Feed}} />
    <Route path="f/:id" components={{content: FeedItem}} />
  </Route>
}

Then i have a Link component like the following somewhere in my Feed component, which is responsible for displaying one specific entry:

<Link to={{ pathname: '/f/' + item.id + '-' + urlSlug(item.title) }}>{item.title}</Link>

The link can then be something like /f/123. So the component FeedItem is loaded when i click on the link navigating to item 123. So far everything is working fine. I also have a specific reducer for my feeditem, connected mapstatetoprops. I think this is all done right.

But my problem or question now is the following:

I have an action called like "SHOW_FEED_ITEM". This action should be used if the user is directly navigating to the the url /f/123, but ideally also if one clicks on the Link component.

But what the router is actually doing is firing a @@router/LOCATION_CHANGE action. From within my reducer, i am able to handle this action and dispatch my own action, but wouldn't prefer this solution since i would have to parse the routing url a second time from there for redirecting into the right action for all those routes.

What i am doing right now is receiving the props.id (coming from the Route f/:id) in my mapStateToProps function and pass it to my component. This is the way my component comes up with the right id.

Now coming to my actual question..

Wouldn't it be better to also tell the Router which Action it should handle instead of just telling him which component(s) it should load?

I know i could add an onClick handler to the Link that dispatches my action but this would only affect a click on the link, no browser back/forth or even refresh user actions.

Is this maybe even already possible right now? How do you guys handle that?

score 1 · Accepted Answer · answered May 12 '16 at 13:51

For the ones coming across the same issues and question: I found a solution react-router already provides.

There is an onEnter and onLeave attribute available for each Route. This is basically a callback function for the Route that is hooked before the route is rendered.

onEnter

<Route path="route/:id" components={{content: MyComponent}} onEnter={()=>store.dispatch(myComponentsEnterAction())} />

onLeave

<Route path="route/:id" components={MyComponent} onLeave={()=>store.dispatch(myComponentsLeaveAction())} />

So here is a complete router code of the example above:

import React from 'react'
import { Route } from 'react-router'
import CoreLayout from './layout/corelayout'
import Feed from './components/feed/feed'
import FeedItem from './components/feed-item/feed-item'

export default function (store) {
  return <Route path='/' component={CoreLayout}>
    <Route path="feed" components={{content: Feed}} onEnter={()=>store.dispatch(displayFeed())} />
    <Route path="f/:id" components={{content: FeedItem}} onEnter={()=>store.dispatch(displayFeedItem())} />
  </Route>
}

Bind specific redux action to one Route using react-router / react-router-redux

1 Answers1