connectAdvanced.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. var _excluded = ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"],
  4. _excluded2 = ["reactReduxForwardedRef"];
  5. import hoistStatics from 'hoist-non-react-statics';
  6. import React, { useContext, useMemo, useRef, useReducer } from 'react';
  7. import { isValidElementType, isContextConsumer } from 'react-is';
  8. import { createSubscription } from '../utils/Subscription';
  9. import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';
  10. import { ReactReduxContext } from './Context'; // Define some constant arrays just to avoid re-creating these
  11. var EMPTY_ARRAY = [];
  12. var NO_SUBSCRIPTION_ARRAY = [null, null];
  13. var stringifyComponent = function stringifyComponent(Comp) {
  14. try {
  15. return JSON.stringify(Comp);
  16. } catch (err) {
  17. return String(Comp);
  18. }
  19. };
  20. function storeStateUpdatesReducer(state, action) {
  21. var updateCount = state[1];
  22. return [action.payload, updateCount + 1];
  23. }
  24. function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
  25. useIsomorphicLayoutEffect(function () {
  26. return effectFunc.apply(void 0, effectArgs);
  27. }, dependencies);
  28. }
  29. function captureWrapperProps(lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs) {
  30. // We want to capture the wrapper props and child props we used for later comparisons
  31. lastWrapperProps.current = wrapperProps;
  32. lastChildProps.current = actualChildProps;
  33. renderIsScheduled.current = false; // If the render was from a store update, clear out that reference and cascade the subscriber update
  34. if (childPropsFromStoreUpdate.current) {
  35. childPropsFromStoreUpdate.current = null;
  36. notifyNestedSubs();
  37. }
  38. }
  39. function subscribeUpdates(shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch) {
  40. // If we're not subscribed to the store, nothing to do here
  41. if (!shouldHandleStateChanges) return; // Capture values for checking if and when this component unmounts
  42. var didUnsubscribe = false;
  43. var lastThrownError = null; // We'll run this callback every time a store subscription update propagates to this component
  44. var checkForUpdates = function checkForUpdates() {
  45. if (didUnsubscribe) {
  46. // Don't run stale listeners.
  47. // Redux doesn't guarantee unsubscriptions happen until next dispatch.
  48. return;
  49. }
  50. var latestStoreState = store.getState();
  51. var newChildProps, error;
  52. try {
  53. // Actually run the selector with the most recent store state and wrapper props
  54. // to determine what the child props should be
  55. newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
  56. } catch (e) {
  57. error = e;
  58. lastThrownError = e;
  59. }
  60. if (!error) {
  61. lastThrownError = null;
  62. } // If the child props haven't changed, nothing to do here - cascade the subscription update
  63. if (newChildProps === lastChildProps.current) {
  64. if (!renderIsScheduled.current) {
  65. notifyNestedSubs();
  66. }
  67. } else {
  68. // Save references to the new child props. Note that we track the "child props from store update"
  69. // as a ref instead of a useState/useReducer because we need a way to determine if that value has
  70. // been processed. If this went into useState/useReducer, we couldn't clear out the value without
  71. // forcing another re-render, which we don't want.
  72. lastChildProps.current = newChildProps;
  73. childPropsFromStoreUpdate.current = newChildProps;
  74. renderIsScheduled.current = true; // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
  75. forceComponentUpdateDispatch({
  76. type: 'STORE_UPDATED',
  77. payload: {
  78. error: error
  79. }
  80. });
  81. }
  82. }; // Actually subscribe to the nearest connected ancestor (or store)
  83. subscription.onStateChange = checkForUpdates;
  84. subscription.trySubscribe(); // Pull data from the store after first render in case the store has
  85. // changed since we began.
  86. checkForUpdates();
  87. var unsubscribeWrapper = function unsubscribeWrapper() {
  88. didUnsubscribe = true;
  89. subscription.tryUnsubscribe();
  90. subscription.onStateChange = null;
  91. if (lastThrownError) {
  92. // It's possible that we caught an error due to a bad mapState function, but the
  93. // parent re-rendered without this component and we're about to unmount.
  94. // This shouldn't happen as long as we do top-down subscriptions correctly, but
  95. // if we ever do those wrong, this throw will surface the error in our tests.
  96. // In that case, throw the error from here so it doesn't get lost.
  97. throw lastThrownError;
  98. }
  99. };
  100. return unsubscribeWrapper;
  101. }
  102. var initStateUpdates = function initStateUpdates() {
  103. return [null, 0];
  104. };
  105. export default function connectAdvanced(
  106. /*
  107. selectorFactory is a func that is responsible for returning the selector function used to
  108. compute new props from state, props, and dispatch. For example:
  109. export default connectAdvanced((dispatch, options) => (state, props) => ({
  110. thing: state.things[props.thingId],
  111. saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
  112. }))(YourComponent)
  113. Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
  114. outside of their selector as an optimization. Options passed to connectAdvanced are passed to
  115. the selectorFactory, along with displayName and WrappedComponent, as the second argument.
  116. Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
  117. props. Do not use connectAdvanced directly without memoizing results between calls to your
  118. selector, otherwise the Connect component will re-render on every state or props change.
  119. */
  120. selectorFactory, // options object:
  121. _ref) {
  122. if (_ref === void 0) {
  123. _ref = {};
  124. }
  125. var _ref2 = _ref,
  126. _ref2$getDisplayName = _ref2.getDisplayName,
  127. getDisplayName = _ref2$getDisplayName === void 0 ? function (name) {
  128. return "ConnectAdvanced(" + name + ")";
  129. } : _ref2$getDisplayName,
  130. _ref2$methodName = _ref2.methodName,
  131. methodName = _ref2$methodName === void 0 ? 'connectAdvanced' : _ref2$methodName,
  132. _ref2$renderCountProp = _ref2.renderCountProp,
  133. renderCountProp = _ref2$renderCountProp === void 0 ? undefined : _ref2$renderCountProp,
  134. _ref2$shouldHandleSta = _ref2.shouldHandleStateChanges,
  135. shouldHandleStateChanges = _ref2$shouldHandleSta === void 0 ? true : _ref2$shouldHandleSta,
  136. _ref2$storeKey = _ref2.storeKey,
  137. storeKey = _ref2$storeKey === void 0 ? 'store' : _ref2$storeKey,
  138. _ref2$withRef = _ref2.withRef,
  139. withRef = _ref2$withRef === void 0 ? false : _ref2$withRef,
  140. _ref2$forwardRef = _ref2.forwardRef,
  141. forwardRef = _ref2$forwardRef === void 0 ? false : _ref2$forwardRef,
  142. _ref2$context = _ref2.context,
  143. context = _ref2$context === void 0 ? ReactReduxContext : _ref2$context,
  144. connectOptions = _objectWithoutPropertiesLoose(_ref2, _excluded);
  145. if (process.env.NODE_ENV !== 'production') {
  146. if (renderCountProp !== undefined) {
  147. throw new Error("renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension");
  148. }
  149. if (withRef) {
  150. throw new Error('withRef is removed. To access the wrapped instance, use a ref on the connected component');
  151. }
  152. var customStoreWarningMessage = 'To use a custom Redux store for specific components, create a custom React context with ' + "React.createContext(), and pass the context object to React Redux's Provider and specific components" + ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' + 'You may also pass a {context : MyContext} option to connect';
  153. if (storeKey !== 'store') {
  154. throw new Error('storeKey has been removed and does not do anything. ' + customStoreWarningMessage);
  155. }
  156. }
  157. var Context = context;
  158. return function wrapWithConnect(WrappedComponent) {
  159. if (process.env.NODE_ENV !== 'production' && !isValidElementType(WrappedComponent)) {
  160. throw new Error("You must pass a component to the function returned by " + (methodName + ". Instead received " + stringifyComponent(WrappedComponent)));
  161. }
  162. var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
  163. var displayName = getDisplayName(wrappedComponentName);
  164. var selectorFactoryOptions = _extends({}, connectOptions, {
  165. getDisplayName: getDisplayName,
  166. methodName: methodName,
  167. renderCountProp: renderCountProp,
  168. shouldHandleStateChanges: shouldHandleStateChanges,
  169. storeKey: storeKey,
  170. displayName: displayName,
  171. wrappedComponentName: wrappedComponentName,
  172. WrappedComponent: WrappedComponent
  173. });
  174. var pure = connectOptions.pure;
  175. function createChildSelector(store) {
  176. return selectorFactory(store.dispatch, selectorFactoryOptions);
  177. } // If we aren't running in "pure" mode, we don't want to memoize values.
  178. // To avoid conditionally calling hooks, we fall back to a tiny wrapper
  179. // that just executes the given callback immediately.
  180. var usePureOnlyMemo = pure ? useMemo : function (callback) {
  181. return callback();
  182. };
  183. function ConnectFunction(props) {
  184. var _useMemo = useMemo(function () {
  185. // Distinguish between actual "data" props that were passed to the wrapper component,
  186. // and values needed to control behavior (forwarded refs, alternate context instances).
  187. // To maintain the wrapperProps object reference, memoize this destructuring.
  188. var reactReduxForwardedRef = props.reactReduxForwardedRef,
  189. wrapperProps = _objectWithoutPropertiesLoose(props, _excluded2);
  190. return [props.context, reactReduxForwardedRef, wrapperProps];
  191. }, [props]),
  192. propsContext = _useMemo[0],
  193. reactReduxForwardedRef = _useMemo[1],
  194. wrapperProps = _useMemo[2];
  195. var ContextToUse = useMemo(function () {
  196. // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
  197. // Memoize the check that determines which context instance we should use.
  198. return propsContext && propsContext.Consumer && isContextConsumer( /*#__PURE__*/React.createElement(propsContext.Consumer, null)) ? propsContext : Context;
  199. }, [propsContext, Context]); // Retrieve the store and ancestor subscription via context, if available
  200. var contextValue = useContext(ContextToUse); // The store _must_ exist as either a prop or in context.
  201. // We'll check to see if it _looks_ like a Redux store first.
  202. // This allows us to pass through a `store` prop that is just a plain value.
  203. var didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);
  204. var didStoreComeFromContext = Boolean(contextValue) && Boolean(contextValue.store);
  205. if (process.env.NODE_ENV !== 'production' && !didStoreComeFromProps && !didStoreComeFromContext) {
  206. throw new Error("Could not find \"store\" in the context of " + ("\"" + displayName + "\". Either wrap the root component in a <Provider>, ") + "or pass a custom React context provider to <Provider> and the corresponding " + ("React context consumer to " + displayName + " in connect options."));
  207. } // Based on the previous check, one of these must be true
  208. var store = didStoreComeFromProps ? props.store : contextValue.store;
  209. var childPropsSelector = useMemo(function () {
  210. // The child props selector needs the store reference as an input.
  211. // Re-create this selector whenever the store changes.
  212. return createChildSelector(store);
  213. }, [store]);
  214. var _useMemo2 = useMemo(function () {
  215. if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY; // This Subscription's source should match where store came from: props vs. context. A component
  216. // connected to the store via props shouldn't use subscription from context, or vice versa.
  217. // This Subscription's source should match where store came from: props vs. context. A component
  218. // connected to the store via props shouldn't use subscription from context, or vice versa.
  219. var subscription = createSubscription(store, didStoreComeFromProps ? null : contextValue.subscription); // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
  220. // the middle of the notification loop, where `subscription` will then be null. This can
  221. // probably be avoided if Subscription's listeners logic is changed to not call listeners
  222. // that have been unsubscribed in the middle of the notification loop.
  223. // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
  224. // the middle of the notification loop, where `subscription` will then be null. This can
  225. // probably be avoided if Subscription's listeners logic is changed to not call listeners
  226. // that have been unsubscribed in the middle of the notification loop.
  227. var notifyNestedSubs = subscription.notifyNestedSubs.bind(subscription);
  228. return [subscription, notifyNestedSubs];
  229. }, [store, didStoreComeFromProps, contextValue]),
  230. subscription = _useMemo2[0],
  231. notifyNestedSubs = _useMemo2[1]; // Determine what {store, subscription} value should be put into nested context, if necessary,
  232. // and memoize that value to avoid unnecessary context updates.
  233. var overriddenContextValue = useMemo(function () {
  234. if (didStoreComeFromProps) {
  235. // This component is directly subscribed to a store from props.
  236. // We don't want descendants reading from this store - pass down whatever
  237. // the existing context value is from the nearest connected ancestor.
  238. return contextValue;
  239. } // Otherwise, put this component's subscription instance into context, so that
  240. // connected descendants won't update until after this component is done
  241. return _extends({}, contextValue, {
  242. subscription: subscription
  243. });
  244. }, [didStoreComeFromProps, contextValue, subscription]); // We need to force this wrapper component to re-render whenever a Redux store update
  245. // causes a change to the calculated child component props (or we caught an error in mapState)
  246. var _useReducer = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates),
  247. _useReducer$ = _useReducer[0],
  248. previousStateUpdateResult = _useReducer$[0],
  249. forceComponentUpdateDispatch = _useReducer[1]; // Propagate any mapState/mapDispatch errors upwards
  250. if (previousStateUpdateResult && previousStateUpdateResult.error) {
  251. throw previousStateUpdateResult.error;
  252. } // Set up refs to coordinate values between the subscription effect and the render logic
  253. var lastChildProps = useRef();
  254. var lastWrapperProps = useRef(wrapperProps);
  255. var childPropsFromStoreUpdate = useRef();
  256. var renderIsScheduled = useRef(false);
  257. var actualChildProps = usePureOnlyMemo(function () {
  258. // Tricky logic here:
  259. // - This render may have been triggered by a Redux store update that produced new child props
  260. // - However, we may have gotten new wrapper props after that
  261. // If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
  262. // But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
  263. // So, we'll use the child props from store update only if the wrapper props are the same as last time.
  264. if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
  265. return childPropsFromStoreUpdate.current;
  266. } // TODO We're reading the store directly in render() here. Bad idea?
  267. // This will likely cause Bad Things (TM) to happen in Concurrent Mode.
  268. // Note that we do this because on renders _not_ caused by store updates, we need the latest store state
  269. // to determine what the child props should be.
  270. return childPropsSelector(store.getState(), wrapperProps);
  271. }, [store, previousStateUpdateResult, wrapperProps]); // We need this to execute synchronously every time we re-render. However, React warns
  272. // about useLayoutEffect in SSR, so we try to detect environment and fall back to
  273. // just useEffect instead to avoid the warning, since neither will run anyway.
  274. useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs]); // Our re-subscribe logic only runs when the store/subscription setup changes
  275. useIsomorphicLayoutEffectWithArgs(subscribeUpdates, [shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch], [store, subscription, childPropsSelector]); // Now that all that's done, we can finally try to actually render the child component.
  276. // We memoize the elements for the rendered child component as an optimization.
  277. var renderedWrappedComponent = useMemo(function () {
  278. return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, actualChildProps, {
  279. ref: reactReduxForwardedRef
  280. }));
  281. }, [reactReduxForwardedRef, WrappedComponent, actualChildProps]); // If React sees the exact same element reference as last time, it bails out of re-rendering
  282. // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
  283. var renderedChild = useMemo(function () {
  284. if (shouldHandleStateChanges) {
  285. // If this component is subscribed to store updates, we need to pass its own
  286. // subscription instance down to our descendants. That means rendering the same
  287. // Context instance, and putting a different value into the context.
  288. return /*#__PURE__*/React.createElement(ContextToUse.Provider, {
  289. value: overriddenContextValue
  290. }, renderedWrappedComponent);
  291. }
  292. return renderedWrappedComponent;
  293. }, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);
  294. return renderedChild;
  295. } // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
  296. var Connect = pure ? React.memo(ConnectFunction) : ConnectFunction;
  297. Connect.WrappedComponent = WrappedComponent;
  298. Connect.displayName = ConnectFunction.displayName = displayName;
  299. if (forwardRef) {
  300. var forwarded = React.forwardRef(function forwardConnectRef(props, ref) {
  301. return /*#__PURE__*/React.createElement(Connect, _extends({}, props, {
  302. reactReduxForwardedRef: ref
  303. }));
  304. });
  305. forwarded.displayName = displayName;
  306. forwarded.WrappedComponent = WrappedComponent;
  307. return hoistStatics(forwarded, WrappedComponent);
  308. }
  309. return hoistStatics(Connect, WrappedComponent);
  310. };
  311. }