Render props version of connect
See original GitHub issueWe’ve been trying to migrate a lot of our containers from HOCs over to components that use render props
For the sake of consistency we’re doing the same for connect
import PropTypes from "prop-types"
import { connect } from "react-redux"
const ReduxDataHandler = ({ render, ...propsToPass }) => {
return render(propsToPass)
}
ReduxDataHandler.propTypes = {
render: PropTypes.func.isRequired
}
const withReduxData = (mapStateToProps, mapDispatchToProps) => {
return connect(mapStateToProps, mapDispatchToProps)(ReduxDataHandler)
}
export default withReduxData
What would be awesome is if it would be possible to add a built in version of connect that does something similar but doesn’t require adding this unnecessary wrapping. Would something like that be feasible?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:17
- Comments:17 (6 by maintainers)
Top Results From Across the Web
React Render Props - Share code between components
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. In...
Read more >Render Props - React
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render...
Read more >You Don't Need React-Redux. `ReduxConnection`, the render ...
There's a way to use render props with Redux instead of React-Redux's higher-order component: connect . This can fundamentally change how you think...
Read more >Understanding React Render Props by Example
Render props means that you pass a render function defined by a separate component's props to indicate what should be returned by the...
Read more >Render Props Pattern
A render prop is a prop on a component, which value is a function that returns a JSX element. The component itself does...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
+1 . I expect you’ll get a lot more over time.
FWIW, I use Typescript, and it really plays poorly with HOC, IMHO.
My 2 cents on this. This can be 100% backwards compatible, just adding a diferent way to connect, nobody breaks and we are all happy. Why relying in custom implementation or yet-another-js-library just to connect with render props?