Является ли полезным паттерн для собственных подпространств имен отдельно от реквизитов состояний?

Question

Является ли следующий шаблон реквизитов, предоставленных в пространстве имен, и реквизитов, предоставленных родителями, полезным шаблоном?

interface OwnProps {
  //The type for the props provided by the parent component
}

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

function mapState(state: RootState, ownProps: OwnProps) {
  return {
    o: {...ownProps},                   // ownProps are namespaced onto o.
    s: {                                 // stateProps are namespaced onto s.
      apiInReach: state.dev.apiInReach,
    }
  };
}

 //// ...

export default connect(
  mapState,
  mapDispatch
)(Dev);

это кажется хорошей практикой, но я не видел, чтобы кто-нибудь использовал его.

Обратите внимание, как ownProps находится в пространстве имен на "o", а stateProps в пространстве имен на "s" в mapState().

Answer 1

Там, по моему мнению, проблем нет.

Кстати, мы можем сделать его более понятным, передав тип в методе, как показано ниже

interface Props extends WithStyles<typeof styles> {
  classes: any,
  parentProps1: TypeOfParentProps1,
  parentProps2: TypeOfParentProps2,
  ...
  stateProps1: Store['stateName1'], // Use `[]` to distinguish from above
  stateProps2: Store['stateName2'],
  ...
  actionDispatched: (payload: TypeOfActionPayload) => void,
  ...

Поскольку вы должны были определить хранилище приставок Введите другое место, назовите его так же хорошо, как и в обычном порядке.

// Redux store defination
export interface Store {
  stateName1: TypeOfStateProps1,
  stateName2: TypeOfStateProps2,
  ...

Answer 2

Похоже, что это может быть эффективно сделано только с использованием mergeProps:

interface OwnProps {
  //The type for the props provided by the parent component
}

function mergeProps(state: RootState, dispatch: Dispatch<any>, ownProps: OwnProps) {
  return {
    dispatch,
    o: ownProps,                   // ownProps are namespaced onto o.
    s: {                           // stateProps are namespaced onto s.
      apiInReach: state.dev.apiInReach,
    }
  };
}

 //// ...

export default connect(
  null,
  null,
  mergeProps
)(Dev);

документация для mergeProps находится здесь: https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#mergeprops -stateprops-dispatchprops-ownprops - object