Redux: объяснили mapDispatchToProps и mapStateToProps!

Следуя моему предыдущему посту о базовой настройке избыточности, теперь я расскажу, как связать компоненты вашего класса с избыточностью.

Сначала импортируйте следующее в свой компонент.

import { connect } from 'react-redux';

Теперь давайте подключим наш компонент к redux.

export default connect(mapStateToProps, madDispatchToProps)(Component);

Connect принимает два аргумента: mapStateToProps и mapDispatchToProps. Чтобы использовать их, нам понадобится действие. В этом случае я буду использовать действие, которое я сделал в своем предыдущем посте Redux.

import { toggle } from './actions';

Теперь к хорошей части, mapDispatchToProps.

const mapDispatchToProps = dispatch => ({
  toggle: () => dispatch(toggle()),
});

Теперь наше действие переключения доступно в свойствах компонента. Чтобы вызвать действие, вы должны просто использовать

this.props.toggle();

Теперь, как нам получить доступ к состоянию Redux из нашего компонента? Вот тогда и приходит на помощь mapStateToProps.

const mapStateToProps = state => {
  return {
      toggle: state.toggle
  }

Теперь у нас есть состояние переключения, доступное в свойствах компонента!

И это все! Теперь вы можете легко управлять состоянием хранилища Redux из любого подключаемого компонента.