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

useContextSelector implementation (Experimental) ⚠️ #5

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ const config = {
namedExports: {
'node_modules/react-is/index.js': [
'isValidElementType',
'isContextConsumer'
'isContextConsumer',
'isContextProvider'
],
'node_modules/react-dom/index.js': ['unstable_batchedUpdates']
}
Expand Down
26 changes: 0 additions & 26 deletions src/alternate-renderers.js

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/Context.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'

export const ReactReduxContext = React.createContext(null)
export const ReactReduxContext = React.createContext({})

export default ReactReduxContext
94 changes: 45 additions & 49 deletions src/components/Provider.js
Original file line number Diff line number Diff line change
@@ -1,62 +1,60 @@
import React, { Component } from 'react'
import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
import { isContextProvider } from 'react-is'
import PropTypes from 'prop-types'
import { ReactReduxContext } from './Context'
import Subscription from '../utils/Subscription'

class Provider extends Component {
constructor(props) {
super(props)
// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
// subscription callback always has the selector from the latest render commit
// available, otherwise a store update may happen between render and the effect,
// which may cause missed updates; we also must ensure the store subscription
// is created synchronously, otherwise a store update may occur before the
// subscription is created and an inconsistent state may be observed
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' &&
typeof window.document !== 'undefined' &&
typeof window.document.createElement !== 'undefined'
? useLayoutEffect
: useEffect

const { store } = props
export function Provider({ context, store, children }) {
// construct a new updater and assign it to a ref on initial render

this.notifySubscribers = this.notifySubscribers.bind(this)
const subscription = new Subscription(store)
subscription.onStateChange = this.notifySubscribers
let [contextValue, setContextValue] = useState(() => ({
state: store.getState(),
store
}))

this.state = {
store,
subscription
let mountedRef = useRef(false)
useIsomorphicLayoutEffect(() => {
mountedRef.current = true
return () => {
mountedRef.current = false
}
}, [])

this.previousState = store.getState()
}

componentDidMount() {
this.state.subscription.trySubscribe()

if (this.previousState !== this.props.store.getState()) {
this.state.subscription.notifyNestedSubs()
useIsomorphicLayoutEffect(() => {
let unsubscribe = store.subscribe(() => {
if (mountedRef.current) {
setContextValue({ state: store.getState(), store })
}
})
if (contextValue.state !== store.getState()) {
setContextValue({ state: store.getState(), store })
}
}

componentWillUnmount() {
if (this.unsubscribe) this.unsubscribe()

this.state.subscription.tryUnsubscribe()
}

componentDidUpdate(prevProps) {
if (this.props.store !== prevProps.store) {
this.state.subscription.tryUnsubscribe()
const subscription = new Subscription(this.props.store)
subscription.onStateChange = this.notifySubscribers
this.setState({ store: this.props.store, subscription })
return () => {
unsubscribe()
}
}

notifySubscribers() {
this.state.subscription.notifyNestedSubs()
}
}, [store])

render() {
const Context = this.props.context || ReactReduxContext
// use context from props if one was provided
const Context =
context && context.Provider && isContextProvider(<context.Provider />)
? context
: ReactReduxContext

return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
return <Context.Provider value={contextValue}>{children}</Context.Provider>
}

Provider.propTypes = {
Expand All @@ -68,5 +66,3 @@ Provider.propTypes = {
context: PropTypes.object,
children: PropTypes.any
}

export default Provider
Loading