如何在 React / Redux mergeProps 中使用 TypeScript

Question

我有以下幾點：

'use strict';

import {AppDispatch} from '../cp';
import {RootState} from '../reducers/root';
import {OwnProps} from '../components/example/better-example';

export function mapDispatch(dispatch: AppDispatch<any>) {
  return {dispatch};
}

export function mapState(state: RootState) {
  return {state};
}

export const mergeProps = <OwnProps>(
  propsFromState: StateProps,
  propsFromDispatch: DispatchProps,
  propsFromParent: OwnProps
) => {
  return {
    dispatch: propsFromDispatch.dispatch,
    s: propsFromState.state,
    o: propsFromParent
  };
};

export type MergeProps<OwnProps> = ReturnType<typeof mergeProps>;
export type StateProps = ReturnType<typeof mapState>;
export type DispatchProps = ReturnType<typeof mapDispatch>;

問題是我不知道如何將<OwnProps>類型向下傳播到傳遞給connect()的mergeProps函數的ReturnType ，如下所示：

export default connect<StateProps, DispatchProps, OwnProps, MergeProps<OwnProps>>(
  mapState as any,
  mapDispatch,
  mergeProps   /// passed here
)(MyComponent);

Answer 1

我不得不添加一個論點：

export type MergedProps<T> = {
  dispatch: DispatchProps["dispatch"],
  s: StateProps["state"],
  o: T
};

export default connect<StateProps, DispatchProps, OwnProps, MergeProps<OwnProps>, RootState>(
  mapState,
  mapDispatch,
  mergeProps  
)(MyComponent);

必須將 RootState 作為第 5 個參數傳遞。

Answer 2

https://redux.js.org/recipes/usage-with-typescript/#typing-the-connect-higher-order-component

    const connector = connect(mapState, mapDispatch,mergeProps)(connectedComponent)
    type PropsFromRedux = ConnectedProps<typeof connector>

    const connectedComponent =(props:PropsFromRedux)=> {
      return //
    }