How to use the @wordpress/element.useReducer function in @wordpress/element

gradientAST = gradientParser.parse( value || DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = value || DEFAULT_GRADIENT;
	} catch ( error ) {
		hasGradient = false;
		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = DEFAULT_GRADIENT;
	}

	const onGradientStructureChange = ( newGradientStructure ) => {
		onChange( serializeGradient( newGradientStructure ) );
	};

	const gradientPickerDomRef = useRef();
	const markerPoints = getMarkerPoints( gradientAST );

	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
		customGradientBarReducer,
		customGradientBarReducerInitialState
	);
	const onMouseEnterAndMove = ( event ) => {
		const insertPosition = getHorizontalRelativeGradientPosition(
			event.clientX,
			gradientPickerDomRef.current,
			INSERT_POINT_WIDTH,
		);

		// If the insert point is close to an existing control point don't show it.
		if ( some(
			markerPoints,
			( { positionValue } ) => {
				return Math.abs( insertPosition - positionValue ) < MINIMUM_DISTANCE_BETWEEN_POINTS;
			}

function useHistoryReducer( size ) {
	// State has 3 parts:
	//
	// `state.entries` is an array of the last changes (up to `size`) to
	// the object with the most recent at position 0.
	//
	// `state.offset` is a pointer to the currently active entry. This will
	// almost always be 0 unless the user recently did an undo without making
	// any new changes since.
	//
	// `state.replayState` is the state that the user most recently tried to
	// undo/redo to - it will be null except for the very short timespan
	// between the user pressing undo and the app updating to that desired
	// state.
	const [ state, dispatch ] = useReducer( reducer( size ), { ...EMPTY_STATE } );

	const { entries, offset, replayState } = state;
	const historyLength = entries.length;

	const replay = useCallback( ( deltaOffset ) => {
		const newOffset = offset + deltaOffset;
		if ( newOffset < 0 || newOffset >= historyLength - 1 ) {
			return false;
		}

		dispatch( { type: REPLAY, payload: newOffset } );
		return true;
	}, [ dispatch, offset, historyLength ] );

	const undo = useCallback( ( count = 1 ) => {
		return replay( typeof count === 'number' ? count : 1 );

function useStoryReducer() {
	const [ state, dispatch ] = useReducer( reducer, INITIAL_STATE );

	const {
		internal,
		api,
	} = useMemo( () => {
		const wrapWithDispatch = ( actions ) => Object.keys( actions )
			.reduce(
				( collection, action ) => ( { ...collection, [ action ]: actions[ action ]( dispatch ) } ),
				{},
			);

		return {
			internal: wrapWithDispatch( internalActions, dispatch ),
			api: wrapWithDispatch( exposedActions, dispatch ),
		};
	}, [ dispatch ] );

export default function useSelect( _mapSelect, deps ) {
	const mapSelect = useCallback( _mapSelect, deps );
	const registry = useRegistry();
	const isAsync = useAsyncMode();
	const queueContext = useMemo( () => ( { queue: true } ), [ registry ] );
	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );

	const latestMapSelect = useRef();
	const latestIsAsync = useRef( isAsync );
	const latestMapOutput = useRef();
	const latestMapOutputError = useRef();
	const isMounted = useRef();

	let mapOutput;

	try {
		if ( latestMapSelect.current !== mapSelect || latestMapOutputError.current ) {
			mapOutput = mapSelect( registry.select, registry );
		} else {
			mapOutput = latestMapOutput.current;
		}
	} catch ( error ) {

( WrappedComponent ) => ( props ) => {
		const [ , doRefresh ] = useReducer( ( s ) => s + 1, 0 );
		const refresher = () => {
			doRefresh( {} );
		};
		return ;
	}
)( EditorTicketEntityListItem );

const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
	const THRESHOLD_RESIZE = 300;
	const TITLE_DEFAULT_HEIGHT = 120;

	const ref = useRef( null );

	const [ previewViewport, setPreviewViewport ] = useState( viewportWidth );
	const [ titleTransform, setTitleTransform ] = useState( {
		scale: 1,
		offset: TITLE_DEFAULT_HEIGHT,
	} );
	const [ recompute, triggerRecompute ] = useReducer( state => state + 1, 0 );

	const updatePreviewTitle = () => {
		if ( ! ref || ! ref.current ) {
			return;
		}

		setTimeout( () => {
			const preview = ref.current.querySelector( '.block-editor-block-preview__content' );
			if ( ! preview ) {
				return;
			}

			const previewScale = parseFloat(
				get( preview, [ 'style', 'transform' ], '' )
					.replace( 'scale(', '' )
					.replace( ')', '' )

const useTicketListFilterState = () => {
	const initialState = {
		displayTicketDate: 'start',
		isChained: false,
		showTickets: 'all',
		ticketsSortedBy: 'chronologically',
	};
	const [state, dispatch] = useReducer(reducer, initialState);

	const setDisplayTicketDate = (displayTicketDate) => {
		dispatch({
			type: 'SET_DISPLAY_TICKET_DATE',
			displayTicketDate,
		});
	};

	const setShowTickets = (showTickets) => {
		dispatch({
			type: 'SET_SHOW_TICKETS',
			showTickets,
		});
	};

	const setTicketsSortedBy = (ticketsSortedBy) => {

function useMovingAnimation( ref, isSelected, enableAnimation, triggerAnimationOnChange ) {
	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
	const [ triggeredAnimation, triggerAnimation ] = useReducer( counterReducer, 0 );
	const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
	const [ transform, setTransform ] = useState( { x: 0, y: 0 } );

	const previous = ref.current ? ref.current.getBoundingClientRect() : null;

	useLayoutEffect( () => {
		if ( triggeredAnimation ) {
			endAnimation();
		}
	}, [ triggeredAnimation ] );
	useLayoutEffect( () => {
		if ( prefersReducedMotion ) {
			return;
		}
		ref.current.style.transform = 'none';
		const destination = ref.current.getBoundingClientRect();
		const newTransform = {

const SenseiImportPage = () => {
	const [ steps, dispatch ] = useReducer( stepsReducer, initialSteps );

	return (
		<div>
			
			{ ( () =&gt; {
				switch ( getCurrentStep( steps ) ) {
					case 'upload':
						return ;
					default:
						return null;
				}
			} )() }
		</div>
	);
};