Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[workaround] react redux React.forwardRef issue #12

Merged
merged 13 commits into from Oct 9, 2018

Conversation

pgarciacamou
Copy link
Owner

@pgarciacamou pgarciacamou commented Oct 9, 2018

Fixes #6

Checklist

  • I have made a material change to the repo (functionality, testing, spelling, grammar)
  • I have read the [Contribution Guide] and my PR follows them.
  • I updated my branch with the master branch.
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation about the functionality in the appropriate .md file
  • I have added inline documentation to the code I modified

Short description of what this PR does:

  • This PR introduces noRef helpers to workaround react-redux invariant bug: Invariant Violation: You must pass a component to the function returned by connect. Instead received {} due to React.forwardRef

Code Sample

import { withContext } from 'react-context-consumer-hoc'
export default connect()(
	withContext.noRef([ContextA], context => context)(MyComponent)
)

import { withContextAsProps } from 'react-context-consumer-hoc'
export default connect()(
	withContextAsProps.noRef(ContextA)(MyComponent)
)

import { UNSAFE_withContext } from 'react-context-consumer-hoc'
export default connect()(
	UNSAFE_withContext.noRef(ContextA)(MyComponent)
)

How does it work?

It is just a wrapper around the top-most consumer, like this:

withContext.noRef = (ContextAPIs, mapContextToProps) => {
  return ComposedComponent => {
    const Component = withContext(ContextAPIs, mapContextToProps)(ComposedComponent)
    return props => (<Component {...props} />)
  }
}

-----

This fix is temporary and should be removed in v3.

@pgarciacamou pgarciacamou added the bug Something isn't working label Oct 9, 2018
@pgarciacamou pgarciacamou self-assigned this Oct 9, 2018
@pgarciacamou
Copy link
Owner Author

I'm only missing adding the documentation. I want to also add an index to the documentation so that it is easier to follow, it has grown so much in a single day.

@pgarciacamou pgarciacamou force-pushed the workaround/react-redux-forwardref-issue branch from 2c07086 to 0120a3c Compare October 9, 2018 03:24
@pgarciacamou pgarciacamou force-pushed the workaround/react-redux-forwardref-issue branch from e43bb61 to 1b4401b Compare October 9, 2018 03:59
@pgarciacamou pgarciacamou force-pushed the workaround/react-redux-forwardref-issue branch 2 times, most recently from 3b19c32 to 9f7e3fc Compare October 9, 2018 16:10
@pgarciacamou pgarciacamou force-pushed the workaround/react-redux-forwardref-issue branch from 9f7e3fc to cbc1284 Compare October 9, 2018 16:14
@pgarciacamou pgarciacamou merged commit fd5cfe4 into master Oct 9, 2018
@pgarciacamou pgarciacamou deleted the workaround/react-redux-forwardref-issue branch October 9, 2018 16:18
pgarciacamou added a commit that referenced this pull request May 22, 2020
…rdref-issue

[workaround] react redux React.forwardRef issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Does not work with react-redux connect.
1 participant