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)
let mapStateToProps = (state) => ({
profile: state.profilePage.profile,
status: state.profilePage.status
});
export default connect(mapStateToProps, {getUserProfile, getStatus, updateStatus})(ProfileContainer)
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 } = stateconst { id } = ownPropsconst todo = getTodoById(state, id)// component receives additionally:return { todo, visibilityFilter }}// Later, in your application, a parent component renders:<ConnectedTodo id={123} />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} />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 изменилось.