Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork3.3k
Use React.createContext() by @markerikson#995
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Changes from1 commit
4e654e231fc9510374936a64103ced7a9103cf4a0f6bfedb15df5a0f1fe01d00d0360f577efb07f724949210282File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
- Loading branch information
Uh oh!
There was an error while loading.Please reload this page.
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -77,6 +77,7 @@ export function createProvider(storeKey = 'store') { | ||
| if (state.store !== props.store) { | ||
| warnAboutReceivingStore() | ||
| ||
| } | ||
| return null; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,11 @@ | ||
| import hoistStatics from 'hoist-non-react-statics' | ||
| import invariant from 'invariant' | ||
| import React, { Component,PureComponent,createElement } from 'react' | ||
| import {ReactReduxContext} from "./context"; | ||
| let hotReloadingVersion = 0 | ||
| export default function connectAdvanced( | ||
| /* | ||
| @@ -105,12 +83,13 @@ export default function connectAdvanced( | ||
| } | ||
| const OuterBaseComponent = connectOptions.pure ? PureComponent : Component; | ||
| class ConnectInner extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| wrapperProps : props.wrapperProps, | ||
| renderCount : 0, | ||
| store : props.store, | ||
| @@ -131,7 +110,7 @@ export default function connectAdvanced( | ||
| static getChildPropsState(props, state) { | ||
| try { | ||
| const nextProps = state.childPropsSelector(props.storeState, props.wrapperProps) | ||
| if (nextProps === state.childProps) return null | ||
| return { childProps: nextProps } | ||
| } catch (error) { | ||
| @@ -140,20 +119,28 @@ export default function connectAdvanced( | ||
| } | ||
| static getDerivedStateFromProps(props, state) { | ||
| const nextChildProps = ConnectInner.getChildPropsState(props, state) | ||
| if(nextChildProps === null) { | ||
| return null; | ||
| } | ||
| return { | ||
| ...nextChildProps, | ||
| wrapperProps : props.wrapperProps, | ||
| } | ||
| } | ||
| shouldComponentUpdate(nextProps, nextState) { | ||
| const childPropsChanged = nextState.childProps !== this.state.childProps; | ||
| const storeStateChanged = nextProps.storeState !== this.props.storeState; | ||
| const hasError = !!nextState.error; | ||
| let wrapperPropsChanged = false; | ||
| const shouldUpdate = childPropsChanged || hasError; | ||
| return shouldUpdate; | ||
| } | ||
| render() { | ||
| @@ -165,75 +152,13 @@ export default function connectAdvanced( | ||
| } | ||
| } | ||
| class Connect extendsOuterBaseComponent { | ||
| constructor(props) { | ||
| super(props) | ||
| this.renderInner = this.renderInner.bind(this); | ||
| } | ||
| /* | ||
| addExtraProps(props) { | ||
| if (!withRef && !renderCountProp) return props; | ||
| @@ -247,37 +172,19 @@ export default function connectAdvanced( | ||
| return withExtras | ||
| } | ||
| */ | ||
| renderInner(providerValue) { | ||
| const {storeState, store} = providerValue; | ||
| ||
| return ( | ||
| <ConnectInner | ||
| key={this.version} | ||
| storeState={storeState} | ||
| store={store} | ||
| wrapperProps={this.props} | ||
| /> | ||
| ); | ||
| } | ||
| render() { | ||
| @@ -291,8 +198,8 @@ export default function connectAdvanced( | ||
| Connect.WrappedComponent = WrappedComponent | ||
| Connect.displayName = displayName | ||
| // TODO We're losing the ability to add a store as a prop. Not sure there's anything we can do about that. | ||
Contributor There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. I still think we can manage this, but by allowing passing a separate context consumer to connect. This way, users can use a custom context provider and just hook into it with their specific components. In other words, we provide const{ SpecialProvider, SpecialConsumer}=createProviderContext()constConnectedNormal=connect(...)(Thing)constConnectedOther=connect(mSP,mDP,merge,{contextConsumer:SpecialConsumer})(Thing)functionSomething(){return(<Providerstore={store}><Providercontext={SpecialProvider}store={store2}><ConnectedNormal><ConnectedOther/></ConnectedNormal></Provider></Provider>)} This way, we get the full advantage of React's context, but have flexibility. ContributorAuthor There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. We could potentially allow passing a That said, I'm not worried about trying to implement store-as-a-prop or anything like that atm. My main concern is getting the data flow and update behavior working right - we can add everything else after that. | ||
| // TODO With connect no longer managing subscriptions, I _think_ is is all unneeded | ||
| /* | ||