Блог

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

 <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)
  

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

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

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

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

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

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

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

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

Вы можете посмотреть на демонстрацию здесь