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.
		
		
		
		
		
			
		
			
				
					
					
						
							70 lines
						
					
					
						
							2.5 KiB
						
					
					
				
			
		
		
	
	
							70 lines
						
					
					
						
							2.5 KiB
						
					
					
				| import { useContext, useDebugValue } from 'react';
 | |
| import { useReduxContext as useDefaultReduxContext } from './useReduxContext';
 | |
| import { ReactReduxContext } from '../components/Context';
 | |
| import { notInitialized } from '../utils/useSyncExternalStore';
 | |
| let useSyncExternalStoreWithSelector = notInitialized;
 | |
| export const initializeUseSelector = fn => {
 | |
|   useSyncExternalStoreWithSelector = fn;
 | |
| };
 | |
| 
 | |
| 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.
 | |
|  */
 | |
| 
 | |
| 
 | |
| export function createSelectorHook(context = ReactReduxContext) {
 | |
|   const useReduxContext = context === ReactReduxContext ? useDefaultReduxContext : () => 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);
 | |
|     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>
 | |
|  * }
 | |
|  */
 | |
| 
 | |
| export const useSelector = /*#__PURE__*/createSelectorHook(); |