// action.ts
import { createAction, Action } from 'redux-actions';
import { ThunkAction } from 'redux-thunk';
import { RootState } from '@/store';

export const SET_ROUTE = 'SET_ROUTE';

export const SET_BACK_FLAG = 'SET_BACK_FLAG';

export const SET_HISTORY_ROUTES = 'SET_HISTORY_ROUTES';

export const setRoute = createAction(SET_ROUTE);

export const setBackFlag = createAction(SET_BACK_FLAG);

export const setHistoryRoutes = createAction(SET_HISTORY_ROUTES);

export const appendHistoryRoute = (): ThunkAction<
  void,
  RootState,
  unknown,
  Action<any>
> => (dispatch, getState) => {
  const { historyRoutes, backFlag, prevRoute } = getState().router;
  if (!backFlag) {
    if (historyRoutes[0] !== prevRoute) { // 判断历史中第一条和要推入历史的这条记录是否一致，不一致则推入
      const newHistoryRoutes = [prevRoute, ...historyRoutes];
      dispatch(setHistoryRoutes(newHistoryRoutes));
    }
  }
};

// reducer.ts
import { handleActions, Action } from 'redux-actions';
import {
  SET_ROUTE,
  SET_BACK_FLAG,
  SET_HISTORY_ROUTES,
} from '../actions/router';
import { Reducer } from 'redux';

export interface RouterState {
  prevRoute?: string;
  route?: string;
  backFlag?: boolean;
  historyRoutes?: string[];
}

const routerReducer: Reducer<RouterState, Action<any>> = handleActions<RouterState, any>(
  {
    [SET_ROUTE]: (state: RouterState, action: Action<string>) => ({
      ...state,
      prevRoute: state.route,
      route: action.payload,
    }),
    [SET_BACK_FLAG]: (state: RouterState, action: Action<boolean>) => ({
      ...state,
      backFlag: action.payload,
    }),
    [SET_HISTORY_ROUTES]: (state: RouterState, action: Action<string[]>) => ({
      ...state,
      historyRoutes: action.payload,
    }),
  },
  {
    prevRoute: null,
    route: null,
    backFlag: false,
    historyRoutes: [],
  }
);

export default routerReducer;

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import Router from 'next/router';
import {
  setRoute,
  appendHistoryRoute,
  setBackFlag,
} from '@/store/actions/router';

const RouteAware: React.FC = (props) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(setRoute(Router.pathname)); // 记录应用刚挂载完的路由，因为此时是没有事件监听的
  }, []);
  useEffect(() => {
    const onComplete = (url: string) => {
      dispatch(setRoute(url));
      dispatch(appendHistoryRoute());
      dispatch(setBackFlag(false));
    };
    Router.events.on('routeChangeComplete', onComplete);

    return () => {
      Router.events.off('routeChangeComplete', onComplete);
    };
  }, [dispatch]);
  return <>{props.children}</>;
};

export default RouteAware;

import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { setBackFlag, setHistoryRoutes } from '@/store/actions/router';
import { useRouter } from 'next/router';
import { useSelector } from '@/store';

const useRouteBack = () => {
  const dispatch = useDispatch();
  const router = useRouter();
  const historyRoutes = useSelector(state => state.router.historyRoutes);
  const goBack = useCallback(() => {
    dispatch(setBackFlag(true));
    if (historyRoutes.length > 0) {
      router.back();
      dispatch(setHistoryRoutes(historyRoutes.slice(1)));
    } else {
      router.push('/');
    }
  }, [dispatch, router, historyRoutes]);

  return goBack;
};

export default useRouteBack;
// const goBack = useRouteBack();
// goBack();

interface AInitOptions = {
    a?: string;
    b?: number;
}
class A {
    private a: string;
    public b: number;
    constructor(options: AInitOptions) {
        this.a = options.a;
        this.b = options.b;
    }
    
    //......
}

const composeEnhancers: <StoreExt, StateExt>(
  ...funcs: Array<StoreEnhancer<StoreExt>>
) => StoreEnhancer<StoreExt> =
  process.env.NODE_ENV !== 'production' ? composeWithDevTools : compose;

const myReducerEnhancer: StoreEnhancer = (
  createStore: StoreEnhancerStoreCreator
): StoreEnhancerStoreCreator => <S = any, A extends Action = AnyAction>(
  reducer: Reducer<S, A>,
  initialState: PreloadedState<S>
) => {
  // do something
  return createStore(reducer, initialState);
};

export default function configureStore(initialState: any) {
  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  const enhancers: StoreEnhancer[] = [middlewareEnhancer];
  if (process.env.NODE_ENV === 'development') {
    enhancers.unshift(myReducerEnhancer);
  }

  const composedEnhancers = composeEnhancers(...enhancers);

  return createStore(rootReducer, initialState, composedEnhancers);
}

import { NextPage, NextPageContext } from 'next';

const MyComponent: NextPage<MyPropsInterface> = props => (
  // ...
)

interface Context extends NextPageContext {
  // any modifications to the default context, e.g. query types
}

MyComponent.getInitialProps = async (ctx: Context) => {
  // ...
  return props
}

const f = <T,>(arg: T): T => {...}

import {
  useSelector as useReduxSelector,
  TypedUseSelectorHook,
} from 'react-redux'

export type RootState = ReturnType<typeof rootRuducer>;

export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;

export const someThunkAction = (...args: any[]): ThunkAction<
  void,
  RootState,
  unknown,
  Action<any>
> => (dispatch, getState) => {
  const { historyRoutes, backFlag, prevRoute } = getState().router;
  if (!backFlag) {
    if (historyRoutes[0] !== prevRoute) {
      const newHistoryRoutes = [prevRoute, ...historyRoutes];
      dispatch(setHistoryRoutes(newHistoryRoutes));
    }
  }
};

interface Props {
  // ......  
  children: React.ReactNode
}

interface IProps {
  propA: number;
  propB: string;
  style: CSSProperties;
  // ……
}

const Comp: React.FC<IProps> = (props) => {
  <div>Hello</div>
};

interface IState {
    stateA: number;
}
class Comp extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            stateA: 0
        };
    }
    
    // ……
}

// libs/hash.ts
const table = new WeakMap()
let counter = 0
function hash(args: any[]): string {
  if (!args.length) return ''
  let key = 'arg'
  for (let i = 0; i < args.length; ++i) {
    let _hash
    if (args[i] === null || typeof args[i] !== 'object') {
      if (typeof args[i] === 'string') {
        _hash = '"' + args[i] + '"'
      } else {
        _hash = String(args[i])
      }
    } else {
      if (!table.has(args[i])) {
        _hash = counter
        table.set(args[i], counter++)
      } else {
        _hash = table.get(args[i])
      }
    }
    key += '@' + _hash
  }
  return key
}

interface CacheInterface {
  get(key: keyInterface): any
  set(key: keyInterface, value: any, shouldNotify?: boolean): any
  keys(): string[]
  has(key: keyInterface): boolean
  delete(key: keyInterface, shouldNotify?: boolean): void
  clear(shouldNotify?: boolean): void
  serializeKey(key: keyInterface): [string, any, string]
  subscribe(listener: cacheListener): () => void
}

serializeKey(key: keyInterface): [string, any, string] {
  let args = null
  if (typeof key === 'function') {
    try {
      key = key()
    } catch (err) {
      // dependencies not ready
      key = ''
    }
  }

  if (Array.isArray(key)) {
    // args array
    args = key
    key = hash(key)
  } else {
    // convert null to ''
    key = String(key || '')
  }

  const errorKey = key ? 'err@' + key : ''

  return [key, args, errorKey]
}

// cache
const cache = new Cache()

// state managers
const CONCURRENT_PROMISES = {} // 保存fetcher调用后的promise，去重(dedupe)用
const CONCURRENT_PROMISES_TS = {} // 保存fetcher调用的时间，去重(dedupe)用
const FOCUS_REVALIDATORS = {} // 窗口获得焦点后的数据重新验证回调
const CACHE_REVALIDATORS = {} // hooks内部的数据重新验证回调，会先更新state，再根据是否shouldRevalidate决定是否发起数据重新验证
const MUTATION_TS = {} // 记录缓存的修改时间，同时通过忽略在此时间点之前的fetcher结果，起到去重和避免脏数据的作用

……

// error retry
function onErrorRetry(
  _,
  __,
  config: ConfigInterface,
  revalidate: revalidateType,
  opts: RevalidateOptionInterface
): void {
  if (!isDocumentVisible()) {
    // if it's hidden, stop
    // it will auto revalidate when focus
    return
  }

  if (config.errorRetryCount && opts.retryCount > config.errorRetryCount) {
    return
  }

  // exponential backoff
  const count = Math.min(opts.retryCount || 0, 8)
  const timeout =
    ~~((Math.random() + 0.5) * (1 << count)) * config.errorRetryInterval
  setTimeout(revalidate, timeout, opts)
}

const slowConnection =
  typeof window !== 'undefined' &&
  navigator['connection'] &&
  ['slow-2g', '2g'].indexOf(navigator['connection'].effectiveType) !== -1

// config
const defaultConfig: ConfigInterface = {
  // events
  onLoadingSlow: () => {},
  onSuccess: () => {},
  onError: () => {},
  onErrorRetry,

  errorRetryInterval: (slowConnection ? 10 : 5) * 1000,
  focusThrottleInterval: 5 * 1000,
  dedupingInterval: 2 * 1000,
  loadingTimeout: (slowConnection ? 5 : 3) * 1000,

  refreshInterval: 0,
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
  refreshWhenHidden: false,
  refreshWhenOffline: false,
  shouldRetryOnError: true,
  suspense: false,
  compare: deepEqual
}

let eventsBinded = false
if (typeof window !== 'undefined' && window.addEventListener && !eventsBinded) {
  const revalidate = () => {
    if (!isDocumentVisible() || !isOnline()) return

    for (let key in FOCUS_REVALIDATORS) {
      if (FOCUS_REVALIDATORS[key][0]) FOCUS_REVALIDATORS[key][0]()
    }
  }
  window.addEventListener('visibilitychange', revalidate, false)
  window.addEventListener('focus', revalidate, false)
  // only bind the events once
  eventsBinded = true
}

const trigger: triggerInterface = (_key, shouldRevalidate = true) => {
  // we are ignoring the second argument which correspond to the arguments
  // the fetcher will receive when key is an array
  const [key, , keyErr] = cache.serializeKey(_key)
  if (!key) return

  const updaters = CACHE_REVALIDATORS[key]
  if (key && updaters) {
    const currentData = cache.get(key)
    const currentError = cache.get(keyErr)
    for (let i = 0; i < updaters.length; ++i) {
      updaters[i](shouldRevalidate, currentData, currentError, i > 0)
    }
  }
}

const broadcastState: broadcastStateInterface = (key, data, error) => {
  const updaters = CACHE_REVALIDATORS[key]
  if (key && updaters) {
    for (let i = 0; i < updaters.length; ++i) {
      updaters[i](false, data, error)
    }
  }
}

const mutate: mutateInterface = async (
  _key,
  _data,
  shouldRevalidate = true
) => {
  const [key] = cache.serializeKey(_key)
  if (!key) return

  // if there is no new data, call revalidate against the key
  if (typeof _data === 'undefined') return trigger(_key, shouldRevalidate)

  // update timestamp
  MUTATION_TS[key] = Date.now() - 1

  let data, error

  if (_data && typeof _data === 'function') {
    // `_data` is a function, call it passing current cache value
    try {
      data = await _data(cache.get(key))
    } catch (err) {
      error = err
    }
  } else if (_data && typeof _data.then === 'function') {
    // `_data` is a promise
    try {
      data = await _data
    } catch (err) {
      error = err
    }
  } else {
    data = _data
  }

  if (typeof data !== 'undefined') {
    // update cached data, avoid notifying from the cache
    cache.set(key, data, false)
  }

  // update existing SWR Hooks' state
  const updaters = CACHE_REVALIDATORS[key]
  if (updaters) {
    for (let i = 0; i < updaters.length; ++i) {
      updaters[i](!!shouldRevalidate, data, error, i > 0)
    }
  }

  // throw error or return data to be used by caller of mutate
  if (error) throw error
  return data
}

const initialData = cache.get(key) || config.initialData
const initialError = cache.get(keyErr)

// if a state is accessed (data, error or isValidating),
// we add the state to dependencies so if the state is
// updated in the future, we can trigger a rerender
const stateDependencies = useRef({
  data: false,
  error: false,
  isValidating: false
})
const stateRef = useRef({
  data: initialData,
  error: initialError,
  isValidating: false
})

const rerender = useState(null)[1]
let dispatch = useCallback(payload => {
  let shouldUpdateState = false
  for (let k in payload) {
    stateRef.current[k] = payload[k]
    if (stateDependencies.current[k]) {
      shouldUpdateState = true
    }
  }
  if (shouldUpdateState || config.suspense) {
    rerender({})
  }
}, [])

const revalidate = useCallback(
  async (
    revalidateOpts: RevalidateOptionInterface = {}
  ): Promise<boolean> => {
    // ……………………
    // 去重判断
    let shouldDeduping =
      typeof CONCURRENT_PROMISES[key] !== 'undefined' && revalidateOpts.dedupe

    try {
      dispatch({
        isValidating: true
      })

      let newData
      let startAt

      if (shouldDeduping) {
        // 去重，等待已经存在的fetcher promise完成
        startAt = CONCURRENT_PROMISES_TS[key]
        newData = await CONCURRENT_PROMISES[key]
      } else {
        // 可能发生数据竞争，所以标记了MUTATION_TS的时间，用于后续的判断
        // req1------------------>res1
        //      req2-------->res2
        if (CONCURRENT_PROMISES[key]) {
          // we can mark it as a mutation to ignore
          // all requests which are fired before this one
          MUTATION_TS[key] = Date.now() - 1
        }

        // 无缓存值时触发加载过慢回调
        if (config.loadingTimeout && !cache.get(key)) {
          setTimeout(() => {
            if (loading) config.onLoadingSlow(key, config)
          }, config.loadingTimeout)
        }

        // 并发请求占位
        if (fnArgs !== null) {
          CONCURRENT_PROMISES[key] = fn(...fnArgs)
        } else {
          CONCURRENT_PROMISES[key] = fn(key)
        }

        CONCURRENT_PROMISES_TS[key] = startAt = Date.now()

        newData = await CONCURRENT_PROMISES[key]

        // 去重间隔过了之后，清除占位
        setTimeout(() => {
          delete CONCURRENT_PROMISES[key]
          delete CONCURRENT_PROMISES_TS[key]
        }, config.dedupingInterval)

        // 请求成功回调
        config.onSuccess(newData, key, config)
      }

      // MUTATION优先，避免过时请求产生脏数据
      if (MUTATION_TS[key] && startAt <= MUTATION_TS[key]) {
        dispatch({ isValidating: false })
        return false
      }
      
      // 更新缓存
      cache.set(key, newData, false)
      cache.set(keyErr, undefined, false)

      // 新的state赋值
      const newState: actionType<Data, Error> = {
        isValidating: false
      }

      if (typeof stateRef.current.error !== 'undefined') {
        // we don't have an error
        newState.error = undefined
      }
      if (config.compare(stateRef.current.data, newData)) {
        // deep compare to avoid extra re-render
        // do nothing
      } else {
        // data changed
        newState.data = newData
      }

      // 触发state更新
      dispatch(newState)

      if (!shouldDeduping) {
        // 将新数据广播给其他hooks
        broadcastState(key, newData, undefined)
      }
    } catch (err) {
      delete CONCURRENT_PROMISES[key]
      delete CONCURRENT_PROMISES_TS[key]

      cache.set(keyErr, err, false)

      if (stateRef.current.error !== err) {
        // 原数据保存，只更新error
        dispatch({
          isValidating: false,
          error: err
        })

        if (!shouldDeduping) {
          // 将错误广播给其他hooks
          broadcastState(key, undefined, err)
        }
      }

      // 错误回调，重试
      config.onError(err, key, config)
      if (config.shouldRetryOnError) {
        // when retrying, we always enable deduping
        const retryCount = (revalidateOpts.retryCount || 0) + 1
        config.onErrorRetry(
          err,
          key,
          config,
          revalidate,
          Object.assign({ dedupe: true }, revalidateOpts, { retryCount })
        )
      }
    }

    loading = false
    return true
  },
  [key]
)

useEffect(() => {
  // ……略
  
  const latestKeyedData = cache.get(key) || config.initialData

  // 只会在key或缓存变了触发data更新
  if (
    keyRef.current !== key ||
    !config.compare(currentHookData, latestKeyedData)
  ) {
    dispatch({ data: latestKeyedData })
    keyRef.current = key
  }

  // 软更新（去重）
  const softRevalidate = () => revalidate({ dedupe: true })

  // 没有初始数据，触发数据重验
  if (!config.initialData) {
    softRevalidate()
  }
  
  // 订阅焦点事件
  let onFocus
  if (config.revalidateOnFocus) {
    // throttle: avoid being called twice from both listeners
    // and tabs being switched quickly
    onFocus = throttle(softRevalidate, config.focusThrottleInterval)
    if (!FOCUS_REVALIDATORS[key]) {
      FOCUS_REVALIDATORS[key] = [onFocus]
    } else {
      FOCUS_REVALIDATORS[key].push(onFocus)
    }
  }

  // 数据更新订阅（外部触发）
  const onUpdate: updaterInterface<Data, Error> = (
    shouldRevalidate = true,
    updatedData,
    updatedError,
    dedupe = true
  ) => {
    // update hook state
    const newState: actionType<Data, Error> = {}
    let needUpdate = false

    // newState和needUpdate赋值，略……
    
    if (needUpdate) {
      dispatch(newState)
    }

    if (shouldRevalidate) {
      revalidate({ dedupe })
    }
    return false
  }

  // add updater to listeners
  if (!CACHE_REVALIDATORS[key]) {
    CACHE_REVALIDATORS[key] = [onUpdate]
  } else {
    CACHE_REVALIDATORS[key].push(onUpdate)
  }

  // 重连事件
  let reconnect = null
  if (!IS_SERVER && window.addEventListener && config.revalidateOnReconnect) {
    window.addEventListener('online', (reconnect = softRevalidate))
  }

  return () => {
    // 清理 FOCUS_REVALIDATORS, CACHE_REVALIDATORS, online事件绑定
    // 具体代码略
  }
}, [key, revalidate])