mapStateToProps
mapStateToProps (часто говорят просто mapState или маппинг стейтов в пропсы) – это функция, идущая первым аргументом в connect и позволяющая получить со стейта данные, необходимые конкретной конструкторной компоненте (к которой и применяется connect).
Напомним, что connect – HOC (компонента высшего порядка), которая применяется для обмена данными со store. А вторым аргументом в connect является mapDispatchToProps (маппинг dispatch к props), который используется для отправки avtion в store.
Пример объявления mapStateToProps и передачи ее в качестве аргумента в conect:
let mapStateToProps = (state) => ({
profile: state.profilePage.profile,
status: state.profilePage.status
});
export default connect(mapStateToProps, {getUserProfile, getStatus, updateStatus})(ProfileContainer)
В данном случае мы в конце файла при для компоненты ProfileContainer применили connect, положив в его первый аргумент mapStateToProps, а во второй – 3 экшн криэйтера. Выше в функции mapStateToProps мы извлекаем из стейта нужные нам данные, чтобы передать в качестве пропсов в компоненту ProfileContainer.
Более “глубокие” особенности mapStateToProps
- Эта функция может иметь второй редкоиспользуемый и необязательный параметр ownProps, позволяющий передать какие-то данные самой компоненты, которые помогут извлечь нужные данные из хранилища.
Пример из учебника:function mapStateToProps(state, ownProps) { const { visibilityFilter } = state const { id } = ownProps const todo = getTodoById(state, id) // component receives additionally: return { todo, visibilityFilter } } // Later, in your application, a parent component renders: <ConnectedTodo id={123} /> - Вызывается mapStateToProps каждый раз при изменении стейта либо второго параметра ownProps. А перерисовывается компонента только тогда, когда какое-либо из полей в mapStateToProps изменилось.