Как пространство имен родительского реквизита с помощью mapState

Question

Мне сказали, что реквизиты из родительского компонента автоматически передаются дочернему, вы не можете их перехватить, даже если вы используете:

function mapStateToProps(state: RootState,  ownProps: OwnProps) {
  return {
    s: {...state},
    o: {...ownProps},
  };
}

Я хочу убедиться, что реквизиты из состояния не очищаются sh с подпорками из родительского компонента.

мы используем Redux connect, например:

export default connect<StateProps, DispatchProps, AllProps, RootState>(
  mapState,
  mapDispatch
)(OurComponent);

, например, если у меня есть компонент

'use strict';

import React from 'react';
import { AppDispatch } from '../../cp';
import { RootState } from '../../reducers/root';
import { connect } from 'react-redux';
import moment from "moment";

interface OwnProps {
  //The type for the props provided by the parent component
  s?: any;
  z1?: any,
  z2?: any,
  z3?: any,
  o?:any

}

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

function mapState(state: RootState, ownProps: OwnProps) {
  return {
    o: {
      ...ownProps
    },
    s: {
      ...state
    }
  };
}

type StateProps = ReturnType<typeof mapState>;
type DispatchProps = ReturnType<typeof mapDispatch>;
type AllProps = StateProps & DispatchProps & OwnProps;

class Home extends React.Component<AllProps, RootState>{
  constructor(p: AllProps) {
    super(p);
    console.log('home props:', p);
  }

  render(){
    return <div>Home Works</div>;
  }
}


export default connect<StateProps, DispatchProps, AllProps, RootState>(mapState, mapDispatch)(Home);

, а затем я отрисовываю его с помощью:

  <Home dispatch={null as any} s={null as any} o={null as any} z1={1} z2={2} z3={true}/>

Я получил это зарегистрировано:

Answer 1

Я думаю, что единственным хорошим решением является использование 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