How to use redux-react-hook - 10 common examples

export default function BaseLayout(props) {
    const store = useContext(StoreContext)
    const { isLogin } = store.getState().toJS().global
    const dispatch = useDispatch()

    const pathname = props.location.pathname
    // 初始化state
    const initalState = {
        currentMenu: formatSecondMenu(pathname),
        menuData: {
            theme: 'dark', // 菜单主题色
            defaultSelectedKeys: pathname, // 当前默认值
            mode: 'inline', // 菜单模式
            defaultOpenKeys: formatFirstMenu(pathname),
            list: userData
        }
    }
    const [state, setState] = useState(initalState)
    const { menuData, currentMenu } = state
    const { history } = props

export function useProblemList() {
  useProblems()
  return useMappedState(getProblemList)
}

export function useSubmissionList() {
  useSubmissions()
  return useMappedState(getSubmissionList)
}

export function useAnnouncements() {
  const dispatch = useAppThunkDispatch()

  useSingleEffect(
    'USE_ANNOUNCEMENTS',
    () => {
      const subs = dispatch(subscribeAnnouncementsAction())
      return () => {
        subs.then(unsub => unsub()).catch(globalErrorCatcher)
      }
    },
    []
  )

  return useMappedState((state: AppState) => state.contest.announcements)
}

const Audit = ({ classes }) => {
  const { loading, message, mode, result } = useMappedState(mapState);
  const [metadataValues, setMetadata] = useState({
    dependencies: 0,
    devDependencies: 0,
    optionalDependencies: 0,
    vulnerabilities: null,
    advisories: null
  });
  const dispatch = useDispatch();
  const { content, error } = result || {};

  const auditRun = option =>
    dispatch(
      runAudit({
        ipcEvent: 'npm-audit',
        cmd: ['audit'],
        options: {

export const Menu: FunctionComponent = memo(() => {
  console.warn(" - ");
  const { highScore } = useMappedState(mapState);
  const { navigateToPlayground } = useMappedActions(mapActions);
  const [animationStatus, setAnimationStatus] = useState<"showing" | "hiding">(
    "showing"
  );

  const handlePress = async () => {
    setAnimationStatus("hiding");
    await delay(MENU_ANIM_DURATION);
    navigateToPlayground();
  };

  return (

const Packages = props => {
  const { packages, mode, directory } = useMappedState(mapState);
  const dispatch = useDispatch();

  const [newPackages, error] = useIpc(
    'ipc-event',
    merge(options, {
      mode,
      directory
    })
  );

  if (error) {
    console.error(error);
  }

  useEffect(
    () => {
      if (typeof newPackages === 'string' && !Boolean(newPackages.length)) {

const Audit = ({ classes }) => {
  const { loading, message, mode, result } = useMappedState(mapState);
  const [metadataValues, setMetadata] = useState({
    dependencies: 0,
    devDependencies: 0,
    optionalDependencies: 0,
    vulnerabilities: null,
    advisories: null
  });
  const dispatch = useDispatch();
  const { content, error } = result || {};

  const auditRun = option =>
    dispatch(
      runAudit({
        ipcEvent: 'npm-audit',
        cmd: ['audit'],
        options: {
          flag: option || false
        }
      })
    );

  const dialogText = mode === 'global' ? iMessage('warning', 'noGlobalAudit') : iMessage('info', 'npmAuditInfo');
  const dialogActionText = iMessage('action', 'runAudit');

const Dashboard = props => {
  const { classes } = props;

  const {
    packages,
    packagesOutdated,
    loading,
    directory,
    mode,
    projectName,
    projectVersion,
    projectDescription,
    projectLicense,
    lastUpdatedAt
  } = useMappedState(mapState);

  const title =
    mode === APP_MODES.LOCAL ? `Project ${projectName || ''}` : 'Global';
  const text =
    mode === APP_MODES.LOCAL ? projectDescription : APP_INFO.GLOBAL_MESSAGE;

  return (
    <section>
      
        
          </section>

export const TopNavigationBar: FunctionComponent = () => {
  useContestOnly()
  const user = useMe()
  const breadcrumbs = useMappedState(selectBreadcrumb)
  const push = usePush()
  const signOut = useSignOut()

  const breadcrumbWithRouter = breadcrumbs.map(breadcrumbItem => ({
    ...breadcrumbItem,
    onClick: () => {
      if (breadcrumbItem.href) push(breadcrumbItem.href)
    },
    href: undefined,
  }))

  const handleSignOut = async () => {
    await signOut()
    TopToaster.showSuccessToast('Signed Out')
  }
  const handleMyAccount = () => push('/account')