faceyspacey/redux-first-router-link

Make <Link /> pure

Closed this issue · 6 comments

gurre commented

Since Link is connected it's not pure and should therefore not be used inside of components. It is desirable to make it stateless to the equivalent of an anchor-tag.

gurre commented

One suggestion is to deligate using a handler-function.

It can't be. Check the rudy-next branch for even more things it needs to listen to from the store.

It's a small component, you are welcome to rip the code and make your own if you have simpler needs.

Also the link package is in fact in the main RFR repo. So that's where u should check the rudy-next branch if interested.

It now listens for basename changes, additional routes added as part of code splitting, and only does active styles related listening if u are using that feature. It also only does additional listening related to relative links only if u are passing props for that feature. It's automated as possible in only listening to additional stuff if in fact u are using that feature. But if u didn't need some of the features u could make a simpler component that doesn't connect at all and only dispatches actions by using the store from context. That was what we originally did for ultimate perf, until other needs became important.

gurre commented

Ok cool, I see you have a lot of things planned. The problem arrises when following idiomatic redux. Presentational Components must be pure and since anchors are used inside of them it makes no sense to connect all components that uses anchors.

I'll guess I could find a workaround by passing in <Link /> inside of a handler.

that does give me an idea to have a LinkLite component for those who don't want features that require listening to the store. It would essentially be the very original component we had here long ago.

In your case for now, I'd rip Link packages code and do exactly what u want. It's a small package and doesn't do much.

gurre commented

Perhaps expose an enhancer?

import { Link, linkEnhancer } from 'redux-first-router-link'

const ConnectedLink = linkEnhancer(Link)

What I really liked about your project is that it's stripped down of all nonsense react-router is doing.