react and redux props differences - reactjs

Question

i have app.js and component.js
component.js is in app.js
in my redux,
there is number and
"number+1" function and
"number-1 "function.
when i use redux props,
export default function Sample2({ props }) {
return (
<div>
<h2>{props.num}</h2>
<button onClick={props.onClickIncrease}>+</button>
<button onClick={props.onClickDecrease}>-</button>
</div>
);
}
this works
and
export default function Sample2( props ) {
return (
<div>
<h2>{props.num}</h2>
<button onClick={props.onClickIncrease}>+</button>
<button onClick={props.onClickDecrease}>-</button>
</div>
);
}
doesn't work
my app.js is
<Sample
num={props.num}
onClickIncrease={props.onClickIncrease}
onClickDecrease={props.onClickDecrease}
/>
i made component like this.
is there difference using {} on props?

Answer 1

Yes of course there is a difference here is a small example perhaps it will explain the situation
const sameFunction1 = ({props}) => {
console.log(props.num)
}
const sameFunction2 = (props) => {
console.log(props.num)
}
sameFunction1({
props: {
num: 1 // <-------
},
num:2
})
sameFunction2({
props: {
num: 1
},
num:2 // <-------
})
To tell the truth, the question does not concern react and redux, the question concerns destructurization.
In the first case we do it, in the second we don't, in the first case we extract props from the object in the second we work with the whole object
In other words:
const sameFunction1 = ({props}) => {
console.log(props.num)
}
it equal below code:
const sameFunction1 = (data) => {
const props = data.props // const {props} = data.props
console.log(props.num)
}