How to namespace parent props using mapState - reactjs

Question

I am told that props from the parent component are automatically passed to child, you cannot intercept them, even if you use:
function mapStateToProps(state: RootState, ownProps: OwnProps) {
return {
s: {...state},
o: {...ownProps},
};
}
I want to make sure that props from state do not clash with props from the parent component. Is there
we are using Redux connect like:
export default connect<StateProps, DispatchProps, AllProps, RootState>(
mapState,
mapDispatch
)(OurComponent);
so for example if I have a component
'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);
and then I render it with:
<Home dispatch={null as any} s={null as any} o={null as any} z1={1} z2={2} z3={true}/>
I get this logged:

Answer 1

I think the only good solution is to use mergeProps like so:
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);
the documentation for mergeProps is here:
https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#mergeprops-stateprops-dispatchprops-ownprops--object