Как использовать TypeScript с React / Redux mergeProps - PullRequest
0 голосов
/ 09 марта 2020

У меня есть следующее:

'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> до функции ReturnType из mergeProps, которая передается connect() вроде так:

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

Ответы [ 2 ]

1 голос
/ 09 марта 2020

https://redux.js.org/recipes/usage-with-typescript/#typing -компонент соединения более высокого порядка

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

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

0 голосов
/ 10 марта 2020

Мне пришлось добавить один аргумент:

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-го параметра.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...