search

mksarge / redux-json-router

Declarative, Redux-first routing for React/Redux browser applications.
MIT License
36 stars 7 forks source link

Making params available in state shape #2

Open martinbryant opened 7 years ago

martinbryant commented 7 years ago

Hi Micheal,

Is it possible to add params to the router object in state shape? Or can you advise how to get to params?

The reason for this is that I recently came across your package from your medium article about redux first routing. I was having trouble creating my application using react router. Your solution sounds a perfect fit for what I am trying to achieve and I like the idea of keeping routing info in redux state.

However, each page of my app is made up of one layout component and several child container components that connect to redux state using react-redux. In the layout component, ownProps.params is available in mapState&mapDispatchToProps. But in the containers that are presented as receive an empty object as ownProps. So the only way to pass params is therefore making a dependency that I do not really want.

If params was available on state I have no issues.

I hope this makes sense as I am new to the world of react/redux and appreciate any help, feedback or alternative solution you can give.

Thanks

mksarge commented 7 years ago

Hey Martin! I see what you're saying. Would it help if you moved your Layout component out of the <Router/> component? You can reference the sample application, where I did just that:

It's a little bit awkward to parse the pathname into a params object on the router/location state in the store, because the Redux API would need to be aware of the route configuration object in order to parse the params successfully - and I designed the redux-first-routing package to be router-agnostic. This is a possibility I'm interested in exploring, but not quite sold on yet.

Another possibility would be to use React context to pass the params down the component tree, but again, I'm not sure if that's the direction I'd like to go with this (let me know what you think).

Anyway, let me know if lifting the Layout component out the <Router/> helps. If you still need to access the params in nested components, I think passing props is the way to go for now.

martinbryant commented 7 years ago

Hi Micheal,

Thank you so much for replying. By diving into some of the code I understand how you manage to match the route config to the url in the router and extract matching params. So yes it would be more tricky to have params in the location state.

I did try what you suggested and added a layout component to handle any loading situations and placed the router inside this but it had no effect unfortunately.

The one thing I can say is that React Router v4 seems to have a 'match' prop that contains the params and then this is passed down to the matching route's component and all its children.

With redux-json-router it only passes params to matching route's component and not the children.

I have some code up on github at github.com/martinbryant/league-dashboard so please feel free to have a look. You will have to excuse me though as it has only been 6 months since I first heard about React and Redux so my code is not great(yet).