How do you pass default props to store - react-redux

Question

So how can I have a component that take's a few default props from a parent, but also has a store? These seems seem to conflict.
<Mycomponent foo="bar">
...this means my component has some state/prop called "foo", with a value that my store does not know about. Doesn't this break the pattern's visibility design? Do I need to pass these initial props down into my store in one of the react life-cycle methods? That seems like extra work and also fragile.
I'm also finding it a little frustrating to map my store's state into the component props object. For example I have a form with some fields and they can take defaults from a parent
<MyForm input1="red", input2="blue">
The store's initial state might look like this
{
status: valid,
modified: false,
form: {
input1: ""
input2: ""
}
}
And my local props before the component is rendered looks like this
{
input1: "red"
input2: "blue"
}
But when things get remapped in mapStateToProps...
var mapStateToProps = function(state) {
return state;
}
it ends up looking like this.
{
form: {
input1: "red"
input2: "blue"
}
status: valid,
modified: false,
input1: "red"
input2: "blue"
}
Because the key1 and key2 props outside the "form" object are from the initial component properties passed down from the parent. They are not part of the store's state object. I really want the props object to match the store, but it seems like it can't unless I start deleting stuff. It seems we are using the this.props object in two ways and it feels incorrect.
What I really want is the properties from the parent to go directly into my store and from there I want my component to render based on my store only. I feel like react-redux does not fit will into the react life-cycle, or at least I don't understand how its supposed to be used.

Answer 1

Checkout documentation: https://github.com/reactjs/react-redux/blob/master/docs/api.md - mapStateToProps - parameter: ownProps:
If ownProps is specified as a second argument, its value will be the props passed to your component
You have examples below API description. It might be helpful.
Moreover, I think that you make something wrong. Redux works well with internal sate of components. I use state to manipulate data, that reflects on GUI but they are irrelevant to the rest of the application (example: isVisible flag in accordion menu).
You should use containers (components, that are connected to the store) only if you have obtain some data from store, otherwise use dumb components.
Compose containers, nest them if needed, avoid retrieving big chunk of state in one container.
You should also take data, that is important for your component. If your container has to know all about entire state...well, it seems that something is wrong with the architecture of the application. I map only few properties from state directly to the props:
const mapStateToProps = (state) => {
return {
status: state.status,
field1: state.form.field1,
field2: state.form.field2
}
}
So I end up with flat map.
Notice, that redux performs shallow comparison of new props:
https://github.com/reactjs/react-redux/blob/master/docs/api.md
If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.
And don't use redux in simple apps, it is for bigger projects.