Use new Context, forwardRef for 6.x (alternate implementation to #995)#997
Closed
cellog wants to merge 30 commits intoreduxjs:masterfrom
Closed
Use new Context, forwardRef for 6.x (alternate implementation to #995)#997cellog wants to merge 30 commits intoreduxjs:masterfrom
cellog wants to merge 30 commits intoreduxjs:masterfrom
Conversation
This commit fixes reduxjs#965 The essence of the problem is that getDerivedStateFromProps is called when the incoming props OR incoming local state changes. So we cannot store anything in state that is needed in shouldComponentUpdate. This commit splits up the tracking of incoming props, incoming store state changes, and removes getDerivedStateFromProps and the usage of local state to store any information. Instead, local state is used as a flag solely to track whether the incoming store state has changed. Since derived props are needed in shouldComponentUpdate, it is generated there and then compared to the previous version of derived props. If forceUpdate() is called, this bypasses sCU, and so a check in render() compares the props that should have been passed to sCU to those passed to render(). If they are different, it generates them just-in-time. To summarize: 1) shouldComponentUpdate is ONLY used to process changes to incoming props 2) runUpdater (renamed to triggerUpdateOnStoreStateChange) checks to see if the store state has changed, and stores the state, then updates the counter in local state in order to trigger a new sCU call to re-generate derived state. Because of these changes, getDerivedStateFromProps and the polyfill are both removed. All tests pass on my machine, but there is at least 1 side effects to the new design: - Many of the tests pass state unchanged to props, and pass this to child components. With these changes, the two updates are processed separately. Props changes are processed first, and then state changes are processed. I updated the affected tests to show that there are "in-between" states where the state and props are inconsistent and mapStateToProps is called with these changes. If the old behavior is desired, that would require another redesign, I suspect.
merge in testing
DO NOT REMOVE PLEASE TIM
merge new rtl tests and test framework
passing store in props and hot update are only failing tests
this allows multiple concurrent react-redux subscriptions in the same component tree, using two root providers. By creating a custom context and passing that to the Provider and to connected components that use it, we get the full benefits of subscriptions with 2 different trees.
* remove hot reloading test, this is unnecessary now because Provider handles subscription through React context, and updates store subscription on componentDidUpdate * remove ProviderMock, it is just Provider now, in connect.spec.js * remove ReduxConsumer, Connect is now ReduxConsumer * error out if withRef is passed, users are expected to use forwardRef now * connect now allows passing in forwardRef() elements too through react-is
* createProvider is no longer necessary, because it is replaced by passing in context provider to Provider and consumer to connected components. Also, nested providers is natively supported in React
This refactor also lifts the "value" up into state for Provider, which is simpler. The bug was that componentDidUpdate was using nextProps instead of lastProps. Switching the state setting to use this.props was the correct behavior
Contributor
Author
|
Forgot to mention the Issues this addresses/fixes This fixes and addresses |
Contributor
Author
|
superseded by #1000 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR combines an alternate approach to implementing Context to #995 and also the move to react-testing-library (#996) because testing React context with enzyme isn't yet possible. The PR does the following:
React.createContext()React.forwardRef<Provider>and context consumer to connected components:getDerivedStateFromProps, instead, derived props are memoized inrender()componentDidMountandcomponentDidUpdateof theProvidercomponent, subscriptions are not handled at all in connected components, except to read from React's context consumer. This doesn't address tearing and other async issues that are caused by redux being synchronous in nature. Fixing this will require breaking redux's backwards compatibility, and that's a different discussion.Providerand handled by React context.Drawbacks to this approach:
withRefis gone for connected components. The code errors out explaining that the user should simply pass a ref in and it will work. This will cause codebases to break that are relying on withRef. Fortunately, the fix is to remove withRef and update code to use standard reference handling procedures in React. docs need to be updatedstorecannot be passed as a prop to connected components. The code errors if a user attempts to pass store to a connected component. The error explains to use a customProvider(as noted above) to fix this, but will cause breaks in the few programs using this feature. docs need to be updatedstoreKeyis irrelevant inconnect()options. The code errors if a user attempts to pass this option inconnect()'s options. The error explains to simply use a nestedProvideror a customProvider. docs need to be updatedConnect, the Context consumer, andPureComponentwrapper around the component in pure mode (2 in impure mode). This is what makes the simplicity possible. The top-most component retrieves the context containing redux state, calculates derived props, and passes them to the inner component. Rather than try to do all of this beforeshouldComponentUpdate, which leads to tons of complexity and brittle code, we pass it to the underlying component. sCU inPureComponentworks perfectly for our needs, preventing update if the derivedProps are unchanged.react-is, which does not yet have an esm build, so we gain a little heft in exchange for the reduction in codeProvider.spec.js@markerikson @timdorr