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

Unexpected usage of context prop on connected component #1139

Closed
Shamilik opened this issue Dec 20, 2018 · 4 comments
Closed

Unexpected usage of context prop on connected component #1139

Shamilik opened this issue Dec 20, 2018 · 4 comments

Comments

@Shamilik
Copy link

Shamilik commented Dec 20, 2018

Do you want to request a feature or report a bug?
Bug/Unexpected behavior

What is the current behavior?
When passing context prop to connected component, it's replacing original Context and connect() returning an undefined.

Related code line:

const ContextToUse = this.props.context || Context

Example:
https://codesandbox.io/s/mm039l9q7x

What is the expected behavior?
Not use context prop or document this behavior.

Which versions of React, ReactDOM/React Native, Redux, and React-Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React-Redux?
Latest

@wgao19
Copy link
Contributor

wgao19 commented Dec 20, 2018

Based on my understanding, v6 allows you to provide a custom context, in which case React-Redux will use your provided context instead of its default one. This allows you to use your own context consumer in your connected components.

You need to pass the same context to both <Provider /> and your connected components.

const MyContext = React.createContext();

// provide to the Provider
<Provider store={store} context={MyContext} />

// provide to all of your connected components
// two ways of doing this:
connect(mapState, mapDispatch, null, { context: MyContext })(MyComponent)
// or
const MyConnectedComponent = connect(mapState, mapDispatch)(MyComponent)
<MyConnectedComponent context={MyContext} />

@markerikson
Copy link
Contributor

Up through v5, store was effectively a "reserved prop name" for the connected wrapper components, as the wrapper interpreted that as "this prop is an alternate Redux store to subscribe to". Similarly, in v6, context is effectively a "reserved prop name", as it's interpreted as "this prop is an alternate React context to read the store state from".

We do need to document this, but this is intentional, and part of the reason for the major version bump.

@brapifra
Copy link

brapifra commented Jan 8, 2019

It should show a more descriptive error though @markerikson @wgao19

@casdevs
Copy link
Contributor

casdevs commented Jan 8, 2019

I‘ve had the same problem and added PR #1134 that helps if the context prop does not contain a valid react context (as in the codesandbox example given above)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants