TypeScript react.useReducer函数代码示例

const useKeyBindingsContextState = (): KeyBindingsContextType => {
  const [{activeWindowId}, dispatchWindows] = React.useReducer(windowsReducer, windowsInitialState)
  const [keyBindingsPerWindow, dispatchKeyBindingsPerWindow] = React.useReducer(
    keyBindingsPerWindowReducer,
    keyBindingsPerWindowInitialState
  )

  const addEventListener = useMapDispatchToCallback(
    dispatchKeyBindingsPerWindow,
    keyBindingsPerWindowCreators.addEventListener
  )

  const removeEventListener = useMapDispatchToCallback(
    dispatchKeyBindingsPerWindow,
    keyBindingsPerWindowCreators.removeEventListener
  )

  const setActiveWindowId = useMapDispatchToCallback(
    dispatchWindows,
    windowsCreators.setActiveWindowId
  )

  const unsetActiveWindowId = useMapDispatchToCallback(
    dispatchWindows,
    windowsCreators.unsetActiveWindowId
  )

  return React.useMemo(
    () => ({
      activeWindowId,
      keyBindingsPerWindow,
      addEventListener,
      removeEventListener,
      setActiveWindowId,
      unsetActiveWindowId
    }),
    [
      activeWindowId,
      addEventListener,
      keyBindingsPerWindow,
      removeEventListener,
      setActiveWindowId,
      unsetActiveWindowId
    ]
  )
}

export default function useRetrieveResource<Model extends BaseModel>(
  createQuery: () => AbstractQuery<Model>,
) {
  const [state, dispatch] = useReducer<Reducer<Model[]>, () => Promise<void>>(
    reducer,
    () =>
      createQuery().fetch((result: Model[]) => {
        (state as any).resolve();
        dispatch({ type: 'resolve', result });
      }),
    initReducer,
  );

  return state;
}

const useListNavigationContextState = (): ListNavigationContextType => {
  const [lists, dispatch] = React.useReducer(listsReducer, listsInitialState)

  const removeList = useMapDispatchToCallback(dispatch, listsCreators.removeList)
  const resetLists = useMapDispatchToCallback(dispatch, listsCreators.resetLists)
  const setHighlightedIndex = useMapDispatchToCallback(dispatch, listsCreators.setHighlightedIndex)
  const setItemCount = useMapDispatchToCallback(dispatch, listsCreators.setItemCount)
  const unsetHighlightedIndex = useMapDispatchToCallback(
    dispatch,
    listsCreators.unsetHighlightedIndex
  )

  return React.useMemo(
    () => ({
      lists,
      removeList,
      resetLists,
      setHighlightedIndex,
      setItemCount,
      unsetHighlightedIndex
    }),
    [lists, removeList, resetLists, setHighlightedIndex, setItemCount, unsetHighlightedIndex]
  )
}

export function useForceUpdate() {
  return useReducer(forcedReducer, false)[1];
}

const useFilters = () => {
  const initialActiveFilters: Filters = {
    search: '',
    labels: {},
  };

  function activeFiltersReducer(state: Filters, action: ActiveFiltersAction) {
    switch (action.type) {
      case ActiveFiltersActionType.SET_SEARCH:
        return { ...state, search: action.payload };
      case ActiveFiltersActionType.SET_LABEL:
        return {
          ...state,
          labels: {
            ...state.labels,
            [action.payload.key]: [
              ...state.labels[action.payload.key],
              action.payload.value,
            ],
          },
        };
      case ActiveFiltersActionType.REMOVE_LABEL:
        return {
          ...state,
          labels: {
            ...state.labels,
            [action.payload.key]: state.labels[action.payload.key].filter(
              label => label !== action.payload.value,
            ),
          },
        };
      case ActiveFiltersActionType.REMOVE_ALL_FILTERS:
        return { ...initialActiveFilters, search: state.search };
      default:
        return state;
    }
  }

  const [activeFilters, dispatchActiveFilters] = useReducer(
    activeFiltersReducer,
    // @ts-ignore
    initialActiveFilters,
  );

  const setSearchFilter = (search: string) => {
    dispatchActiveFilters({
      type: ActiveFiltersActionType.SET_SEARCH,
      payload: search,
    });
  };

  const setFilterLabel = (key: string, value: string) => {
    if (!activeFilters.labels[key]) {
      activeFilters.labels[key] = [];
    }

    if (activeFilters.labels[key].includes(value)) {
      removeFilterLabel(key, value);
    } else {
      dispatchActiveFilters({
        type: ActiveFiltersActionType.SET_LABEL,
        payload: { key, value },
      });
    }
  };

  const removeFilterLabel = (key: string, value: string) => {
    dispatchActiveFilters({
      type: ActiveFiltersActionType.REMOVE_LABEL,
      payload: { key, value },
    });
  };

  const removeAllFiltersLabels = () => {
    dispatchActiveFilters({
      type: ActiveFiltersActionType.REMOVE_ALL_FILTERS,
      payload: { key: '', value: '' },
    });
  };

  const hasActiveLabel = (key: string, value: string): boolean => {
    return (
      activeFilters.labels[key] && activeFilters.labels[key].includes(value)
    );
  };

  return {
    activeFilters,
    setSearchFilter,
    setFilterLabel,
    removeFilterLabel,
    removeAllFiltersLabels,
    hasActiveLabel,
  };
};

export function useToggle(
  initialValue: boolean
): [boolean, (force?: boolean) => void] {
  return useReducer(reducer, initialValue)
}

export function useForceUpdate() {
  const [, update] = useReducer(reducer, false)

  return update as () => void
}

export function useMediaControls(player: React.RefObject<HTMLMediaElement>) {
  const [state, dispatch] = useReducer(mediaReducer, {
    currentTime: 0,
    paused: true,
    oldVolume: 1,
    volume: 1,
    muted: false,
  });

  function pause() {
    if (player.current) {
      player.current.pause();
    }
  }

  function play() {
    if (player.current) {
      return player.current.play();
    } else {
      return Promise.reject();
    }
  }

  function setVolume(volume: number) {
    if (player.current) {
      if (volume < 0) {
        if (state.volume > 0) {
          volume = 0;
        } else {
          return;
        }
      } else if (volume > 1) {
        volume = 1;
        if (state.volume < 1) {
          volume = 1;
        } else {
          return;
        }
      }
      player.current.volume = volume;

      // no onmuted event, must set on volumechange
      if (volume === 0) {
        player.current.muted = true;
      } else {
        player.current.muted = false;
      }
      dispatch({ type: 'volume', volume });
    }
  }

  function mute() {
    setVolume(0);
  }

  function unmute() {
    setVolume(state.oldVolume);
  }

  function seek(value: number) {
    if (player.current) {
      player.current.currentTime = value;
    }
  }

  function stop() {
    pause();
    seek(0);
  }

  function restart() {
    seek(0);
    return play();
  }

  useEffect(() => {
    if (player.current !== null) {
      dispatch({
        type: 'init',
        state: {
          currentTime: player.current.currentTime,
          paused: isPaused(player.current),
          oldVolume: player.current.volume,
          volume: player.current.volume,
          muted: player.current.muted,
        },
      });

      function playPauseHandler(this: HTMLMediaElement) {
        dispatch({ type: 'playPause', paused: isPaused(this) });
      }
      function volumeHandler(this: HTMLMediaElement) {
        dispatch({ type: 'volume', volume: this.volume });
      }
      function seekHandler(this: HTMLMediaElement) {
        dispatch({ type: 'seek', currentTime: this.currentTime });
      }

      player.current.addEventListener('play', playPauseHandler); // fired by play method or autoplay attribute
      player.current.addEventListener('playing', playPauseHandler); // fired by resume after being paused due to lack of data
//.........这里部分代码省略.........

export default function useRetrieveResourceAndSubscribe<
  Model extends BaseModel
>(
  createQuery: () => AbstractQuery<Model>,
  { visibleTimeout }: UseResourceAndSubscribeOptions = defaultOptions,
) {
  const subscribeResultRef = useRef<SubscribeResult<Model[]> | undefined>(
    undefined,
  );
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined,
  );
  const resultRef = useRef<Model[] | undefined>(undefined);

  const unsubscribe = (): void => {
    logger.log('unsubscribe');

    // reset timeout to allow resubscribing
    timeoutRef.current = undefined;
    resultRef.current = undefined;

    if (subscribeResultRef.current) {
      subscribeResultRef.current.stop();
      subscribeResultRef.current = undefined;
    }
  };

  const [state, dispatch] = useReducer<Reducer<Model[]>, () => Promise<void>>(
    reducer,
    () =>
      new Promise((resolve, reject) => {
        const query = createQuery();
        const queryLogger = logger.context({
          resourceName: (query as any).client.resourceName,
          key: (query as any).key,
        });
        queryLogger.debug('init');

        const subscribe = (): void => {
          queryLogger.debug('subscribing', {
            subscribeResultRef: subscribeResultRef.current,
            timeoutRef: timeoutRef.current,
          });
          subscribeResultRef.current = query.fetchAndSubscribe(
            (err: Error | null, changes: Changes<Model>) => {
              queryLogger.debug('received changes', {
                err,
                changes,
              });
              if (err) {
                // eslint-disable-next-line no-alert
                alert(`Unexpected error: ${err}`);
                return;
              }

              const currentResult = resultRef.current;
              const newResult = applyChanges(
                currentResult,
                changes,
                '_id', // TODO get keyPath from client(/store)
              );

              if (newResult && newResult !== currentResult) {
                resultRef.current = newResult;
                dispatch({ type: 'resolve', result: newResult });
              }
            },
          );
        };

        const handleVisibilityChange = () => {
          if (!document.hidden) {
            if (timeoutRef.current !== undefined) {
              queryLogger.debug('timeout cleared');
              clearTimeout(timeoutRef.current);
              timeoutRef.current = undefined;
            } else if (!subscribeResultRef.current) {
              queryLogger.info('resubscribe');
              subscribe();
            }
            return;
          }

          if (subscribeResultRef.current === undefined) return;

          queryLogger.debug('timeout visible');
          timeoutRef.current = setTimeout(unsubscribe, visibleTimeout);
        };

        document.addEventListener(
          'visibilitychange',
          handleVisibilityChange,
          false,
        );

        if (!document.hidden) {
          subscribe();
        }
      }),
    initReducer,
//.........这里部分代码省略.........