Access match object in reducer

[joaosoares]

It doesn't seem like it is possible to access the match object in the reducer. Should there be a way to connect a specific Route so that its state is saved to the reducer as well? Something like

import { ConnectedRouter, ConnectedRoute } from 'connected-react-router'
...
<ConnectedRouter history={history}>
  <ConnectedRoute path='/example/:willshow' />
  <Route path='/example/:wontshow' />
</ConnectedRouter>

that would generate the state

{
  history: {
    location: {
      path: '/example/somevalue'
    }
  },
  match: {
    params: {
      willshow: 'somevalue'
    },
    // ... React-Router match object (from https://reacttraining.com/react-router/#match)
  }
} 

This would basically make the reducer state be the same as the Router object received from the withRouter connector.

[supasate]

IMO, the reducer state cannot be the same with the router object received from withRouter.

With withRouter, it provides props for a single route. However, the proposed ConnectedRoute can be applied to multiple routes.

We might provide additional key prop to ConnectedRoute like this:

import { ConnectedRouter, ConnectedRoute } from 'connected-react-router'
...
<ConnectedRouter history={history}>
  <ConnectedRoute key="parent" path='/example/:username' render={({match}) => (
    <div>
      {match.params.username}
      <ConnectedRoute key="child" path={`${match.url}/:item`} render={({match}) => (
        {match.params.item} 
      )} />
    </div>
  )} />
</ConnectedRouter>

Then, if the URL is /example/supasate/pencil, the reducer state might be like this:

{
  history: {
    location: {
      path: '/example/somevalue'
    }
  },
  matches: {
    parent: {
      params: {
        username: 'supasate',
      },
    },
    child: {
      params: {
        item: 'pencil',
      },
    }
  }
} 

However, the mapStateToProps needs to know the key name which makes it tight coupling with the route. So, I don't think it's the right way to go.

If you have any idea, feel free to discuss :)

[joaosoares]

That's true. Maybe we could connect the <Switch /> components, since they match exclusively with a route?

The key property would still have to be set, but the coupling would happen on a higher-level, as there are usually fewer switches than routes and they're less likely to change dynamically.

<ConnectedRouter history={history}>
  <ConnectedSwitch key="mainnav">
    <Route path='/example/:username' render={({match}) => (
      <div>
        {match.params.username}
        <Route path={`${match.url}/:item`} render={({match}) => (
          {match.params.item} 
        )} />
      </div>
    )} />
    <Route path ='/other/:id' component={OtherComponent}/>
  </ConnectedSwitch>
</ConnectedRouter>

The state for /example/supasate could be

{
  /* ... */
  matches: {
    mainnav: {
      params: {
        username: 'supasate',
      },
    }
  }
} 

And the state for /other/someid would be

{
  /* ... */
  matches: {
    mainnav: {
      params: {
        id: 'someid',
      },
    }
  }
} 

As for the child route, it'd only be connected if it's enclosed on its own <Switch />

[supasate]

Yes, the coupling still exists. A component needs to know that it will be wrapped in which key of ConnectedSwitch.

Compared to connecting a route directly with ConnectedRoute in the previous comment, I prefer ConnectedRoute to ConnectedSwitch because it's quite straightforward about mapping one-to-one of the match we need and the state in redux store. Anyway, I still don't like how coupling it is.

We may keep this issue open and see other ideas if there is the same demand on this feature.

[joaosoares]

I agree this still needs some thought. For now, the workaround I found was to create a static route config and use the matchPath function provided by React Router to avoid parsing the current path manually.

[trungdq88]

@joaosoares could you also share the way you are doing with matchPath? I am using createMatchSelector in react-router-redux and wondering if there is a same method in connected-react-router.

[brneto]

Try this:

import { matchPath } from 'react-router-dom';

const match = matchPath(
    router.location.pathname, // like: /course/123
    { path: '/course/:id' }
  );
const id = match.params.id; // get: 123

[winterspan]

Any headway on this issue? It seems like a major limitation to not have access to the match properties in redux (for use in thunks)

[jorgenbs]

I'm also suprised this isn't a basic feature. For now I'm using matchPath.

[piu130]

Whats the point of having the key prop? Can't we just merge the state?

{
  history: {
    location: {
      path: '/example/somevalue'
    }
  },
  matches: {
    params: {
      username: 'supasate',
      item: 'pencil'
    }
  }
}

[brneto]

@jorgenbs @trungdq88 you can do this way too:

import { createMatchSelector } from 'connected-react-router';

const matchSelector = createMatchSelector({ path: '/course/:id })
const match = matchSelector(state) // like: /course/123
const id = match.params.id; // get: 123

[seb-bizeul]

@brneto awesome thanks !

[json2d]

+1 lets get match params into state