mapDispatchToProps и mapStateToProps - это функции, которые передаются в connect() в качестве аргументов и определяют, какие данные и действия передавать компоненту.

mapStateToProps()

mapStateToProps() - это функция, которая принимает текущее состояние state из хранилища и возвращает объект свойств props, которые будут переданы компоненту. Она позволяет компоненту получать доступ к состоянию приложения и использовать его для обновления интерфейса. mapStateToProps() вызывается каждый раз при обновлении состояния в хранилище, что обновляет свойства компонента и вызывает перерисовку.

Например, вот пример функции mapStateToProps, которая передает свойство count в компонент:

function mapStateToProps(state) {
  return {
    count: state.count,
  }
}

mapDispatchToProps()

mapDispatchToProps() - это функция, которая принимает диспетчер dispatcher из хранилища Redux и возвращает объект свойств, которые представляют действия, доступные в компоненте. Она позволяет компоненту отправлять действия в хранилище и обновлять состояние приложения. mapDispatchToProps() вызывается только один раз при инициализации компонента.

Например, вот пример функции mapDispatchToProps, которая передает свойство incrementCount, которое вызывает действие INCREMENT:

function mapDispatchToProps(dispatch) {
  return {
    incrementCount: () => dispatch({ type: "INCREMENT" }),
  }
}

После определения функций mapStateToProps() и mapDispatchToProps() они могут быть переданы в функцию connect() для связи компонента с Redux-хранилищем:

import { connect } from 'react-redux';
 
...
 
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Теперь компонент MyComponent может получать доступ к данным и действиям из хранилища Redux через свойства (props), которые определены в функциях mapStateToProps и mapDispatchToProps.

connect()

connect() связывает mapStateToProps() и mapDispatchToProps() с компонентом и передает необходимые поля и методы в него. Возвращает она новый компонент-обёртку для вашего компонента.

connect() - это функция из библиотеки react-redux. Она создает новый компонент, который оборачивает исходный компонент и обеспечивает ему доступ к состоянию и действиям из хранилища.

Если же у компонента нет необходимости в передаче ему mapStateToProps или mapDispatchToProps передавайте undefined или null в него.

Назад