В последнее время, работая с React / Redux, я столкнулся с небольшой проблемой: я понятия не имел, как mergeProps работает. В качестве необязательного аргумента функции connect redux легко полностью забыть о ее существовании. Итак, я хотел сделать несколько быстрых заметок о том, как его использовать, прежде чем я их забуду.
MergeProps используется redux для объединения функций mapStateToProps и mapDispatchToProps, указанных в ваших контейнерах. Если вы не вызываете mergeProps в функции connect, она будет использовать значение по умолчанию mergeProps, которое создает общий объект, содержащий propsFromState, propsFromDispatch и propsFromParentComponents. Однако, когда вы определяете mergeProps себя, вы можете передать ему еще больше свойств.
В моем случае использования мы хотели объединить два onClick метода, чтобы не указывать их в подключенном компоненте. После передачи обычных свойств мы определили общий объект, который нужно объединить с ними. Для этого объекта были определены наши функции, как показано ниже.
return Object.assign({}, propsFromState, propsFromDispatch, ownProps, {
closeCaseWithReset: () => propsFromDispatch.closeCaseWithReset(propsFromState.caseNumber, ownProps.logonId, propsFromState.oAuthToken),
closeCaseAndGoHome: () => propsFromDispatch.closeCaseAndGoHome(propsFromState.caseNumber, ownProps.logonId, propsFromState.oAuthToken)
});
Это было частью более крупного рефакторинга, который гарантировал, что мы не будем передавать реквизиты, такие как oAuthToken, полностью вниз как ownProps от компонента к компоненту. Использование mergeProps сделало наши презентационные компоненты более чистыми, убрав их определения методов, чтобы они могли просто сосредоточиться на правильном рендеринге своих элементов, а не на определении функций для взаимодействия с остальной частью приложения.
