Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Use a Render Prop

cdb.reacttraining.com

Post reply on HN
Print view View original

31–35 of 35 posts

Re: Use a Render Prop

#31

Post by catpolice »

I started today by setting out to write a response of the form "Certainly you couldn't rewrite MY HOC library to use render props, look at how it [etc]" and ended today having rewritten my HOC library to use render props. In the process, I was able to dramatically simplify the API and remove about a third of the overall code.

So, uh, thanks.

Re: Use a Render Prop

#32

Post by Chyzwar »

tootie wrote: post #5

Even using the term "higher order" that seems like a very OOP solution, while render props is very functional and thus a better idiom for JavaScript.

Higher order function is a functional pattern. In some OOP languages where functions were not available (Java7), it was not possible to create Higher order function without classes. https://en.wikipedia.org/wiki/Higher-order_function

In fact, render as props is more an OOP pattern. You pass render functions as props and you use delegation pattern to pass context. https://en.wikipedia.org/wiki/Delegation_pattern

ReactTrainig maybe should fix react-router-redux to work with redux time travel.

Re: Use a Render Prop

#33

Post by couchand »

acemarke wrote: post #27
couchand wrote: post #26

Earlier quoted context omitted.

I definitely wasn't recommending that usage, just illustrating what it might look like. I personally think it looks much cleaner, which I would call an advantage. I've considered the first point, but hadn't thought about the second and third. I'm guessing the last point isn't a concern if you're using class properties for those? Given all this, if you were redesigning the API today, would you now make connect take th…

No. The reason why it's written as not just a HOC, but a curried-ish function is so that you could potentially reuse the "connection" definition for multiple components: const SpecificConnection = connect(mapState, mapDispatch); const ConnectedFirst = SpecificConnection(FirstComponent); const ConnectedSecond = SpecificConnection(SecondComponent); Admittedly, I suspect that use case isn't popping up very often. Most o…

Theoretically that could be useful, but I've also never seen connections used this way. I have seen components connected in more than one way, but of course that's no easier with the curried style. And, I'd point out, if someone actually wanted to share the configuration, it's trivial enough to write:

  const SpecificConnection = (Component) => connect(Component, mapState, mapDispatch);
Not that I'd argue against currying generally -- it's only that it turns out to be a little awkward here with the various optional parameters to connect, and also that the connection setup in practice seems to be tightly coupled to the connected component.

Re: Use a Render Prop

#34

Post by hguhghuff »

acemarke wrote: post #9
hguhghuff wrote: post #6

What would the code look like to use this approach for Redux. Could Redux boilerplate be reduced?

Hi, I'm a Redux maintainer. First, could you clarify what _you_ mean by "Redux boilerplate" in this case? The phrase gets thrown around frequently, but it means different things to different people. Just yesterday, I tweeted some thoughts on how you can use as much abstraction as you want with Redux, and linked to examples of reusable action creator/reducer logic [0]. I also wrote a pair of blog posts that discuss th…

I love Redux. I just want it to take less code to use.

Re: Use a Render Prop

#35

Post by acemarke »

hguhghuff wrote: post #34
acemarke wrote: post #9

Earlier quoted context omitted.

Hi, I'm a Redux maintainer. First, could you clarify what _you_ mean by "Redux boilerplate" in this case? The phrase gets thrown around frequently, but it means different things to different people. Just yesterday, I tweeted some thoughts on how you can use as much abstraction as you want with Redux, and linked to examples of reusable action creator/reducer logic [0]. I also wrote a pair of blog posts that discuss th…

I love Redux. I just want it to take less code to use.

Have you looked at any of the existing libraries in the ecosystem? There's dozens of tools for generating reusable functions like action creators and reducers [0], managing complex collections [1], and even higher-level abstractions on top of Redux like Kea [2].

Ultimately, you can put as much or as little abstraction on top of Redux as you want.

[0] https://github.com/markerikson/redux-ecosystem-links/blob/ma...

[1] https://github.com/markerikson/redux-ecosystem-links/blob/ma...

[2] https://kea.js.org/

Post reply on HN