Конфликт с реквизитом

Question

Что произойдет, если мы передадим реквизит при вызове компонента, а также с состоянием карты в реквизит

<Modal foo={1} ... />

const Modal = ({ foo, ... }) => {
     console.log(foo) // 1 or 2 ? and Why ? is it random ?
}

export default connect(
    (state) => ({
        foo: state.foo, // let's say the value in the reducer is 2
        ...
    })
)(Modal)

есть правило или оно случайно?

Answer 1

connect - это HOC, который передает значения, полученные от mapStateToProps и mapDispatchToProps компоненту.

Значения, переданные из mapStateToProps, mapDispatchToProps, переопределят реквизиты, переданные компоненту.

Так что в вышеприведенном случае console.log({foo}) будет записывать 2.

---

Чтобы лучше понять это, вы можете подумать о том, что Component используется в connect like

<Component {...ownProps} {...valuesFromConnectArgs} />

---

Вы также можете посмотреть на код подключения от реакции.redux , который имеет следующий метод для слиянияProps

export function defaultMergeProps(stateProps, dispatchProps, ownProps) {
  return { ...ownProps, ...stateProps, ...dispatchProps }
}

Вы можете посмотреть демо здесь