You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					85 lines
				
				2.8 KiB
			
		
		
			
		
	
	
					85 lines
				
				2.8 KiB
			| 
											3 years ago
										 | "use strict"; | ||
|  | 
 | ||
|  | exports.__esModule = true; | ||
|  | exports.createSelectorHook = createSelectorHook; | ||
|  | exports.useSelector = exports.initializeUseSelector = void 0; | ||
|  | 
 | ||
|  | var _react = require("react"); | ||
|  | 
 | ||
|  | var _useReduxContext = require("./useReduxContext"); | ||
|  | 
 | ||
|  | var _Context = require("../components/Context"); | ||
|  | 
 | ||
|  | var _useSyncExternalStore = require("../utils/useSyncExternalStore"); | ||
|  | 
 | ||
|  | let useSyncExternalStoreWithSelector = _useSyncExternalStore.notInitialized; | ||
|  | 
 | ||
|  | const initializeUseSelector = fn => { | ||
|  |   useSyncExternalStoreWithSelector = fn; | ||
|  | }; | ||
|  | 
 | ||
|  | exports.initializeUseSelector = initializeUseSelector; | ||
|  | 
 | ||
|  | const refEquality = (a, b) => a === b; | ||
|  | /** | ||
|  |  * Hook factory, which creates a `useSelector` hook bound to a given context. | ||
|  |  * | ||
|  |  * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`. | ||
|  |  * @returns {Function} A `useSelector` hook bound to the specified context. | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | function createSelectorHook(context = _Context.ReactReduxContext) { | ||
|  |   const useReduxContext = context === _Context.ReactReduxContext ? _useReduxContext.useReduxContext : () => (0, _react.useContext)(context); | ||
|  |   return function useSelector(selector, equalityFn = refEquality) { | ||
|  |     if (process.env.NODE_ENV !== 'production') { | ||
|  |       if (!selector) { | ||
|  |         throw new Error(`You must pass a selector to useSelector`); | ||
|  |       } | ||
|  | 
 | ||
|  |       if (typeof selector !== 'function') { | ||
|  |         throw new Error(`You must pass a function as a selector to useSelector`); | ||
|  |       } | ||
|  | 
 | ||
|  |       if (typeof equalityFn !== 'function') { | ||
|  |         throw new Error(`You must pass a function as an equality function to useSelector`); | ||
|  |       } | ||
|  |     } | ||
|  | 
 | ||
|  |     const { | ||
|  |       store, | ||
|  |       subscription, | ||
|  |       getServerState | ||
|  |     } = useReduxContext(); | ||
|  |     const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, selector, equalityFn); | ||
|  |     (0, _react.useDebugValue)(selectedState); | ||
|  |     return selectedState; | ||
|  |   }; | ||
|  | } | ||
|  | /** | ||
|  |  * A hook to access the redux store's state. This hook takes a selector function | ||
|  |  * as an argument. The selector is called with the store state. | ||
|  |  * | ||
|  |  * This hook takes an optional equality comparison function as the second parameter | ||
|  |  * that allows you to customize the way the selected state is compared to determine | ||
|  |  * whether the component needs to be re-rendered. | ||
|  |  * | ||
|  |  * @param {Function} selector the selector function | ||
|  |  * @param {Function=} equalityFn the function that will be used to determine equality | ||
|  |  * | ||
|  |  * @returns {any} the selected state | ||
|  |  * | ||
|  |  * @example | ||
|  |  * | ||
|  |  * import React from 'react' | ||
|  |  * import { useSelector } from 'react-redux' | ||
|  |  * | ||
|  |  * export const CounterComponent = () => { | ||
|  |  *   const counter = useSelector(state => state.counter) | ||
|  |  *   return <div>{counter}</div> | ||
|  |  * } | ||
|  |  */ | ||
|  | 
 | ||
|  | 
 | ||
|  | const useSelector = /*#__PURE__*/createSelectorHook(); | ||
|  | exports.useSelector = useSelector; |