mapStateToProps против mapDispatchToProps

mapStateToProps — это функция, которую вы будете использовать для предоставления данных хранилища вашему компоненту, тогда как mapDispatchToProps — это то, что вы будете использовать для предоставления создателей действий в качестве реквизита для вашего компонента.

Согласно документам:

Если указан аргумент mapStateToProps, новый компонент подпишется на обновления магазина Redux. Это означает, что при каждом обновлении хранилища будет вызываться mapStateToProps. Результатом mapStateToProps должен быть простой объект, который будет объединен с пропсами компонента.

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

Простым примером будет

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { addTodo: bindActionCreators(addTodo, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

Говоря очень простым языком,

mapStateToProps: связывает состояние редукции с реквизитами компонента реакции.

mapDispatchToProps: связывает редукс-экшены с реагирующими реквизитами.

Очень легкий пример: (надеюсь, вы понимаете, что я имею в виду)

// state
const mapStateToProps = state => {
  return { lists: state.lists };
};

// props
const mapDispatchToProps = ({ lists }) => (
  <ul>
    { 
      lists.map(el => (
        <li key={ el.id }>
          { el.heading }
        </li>
      )
    }
  </ul>
);

// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);

В очень простых терминах:

mapStateToProps вызывается, когда вы хотите получить значение глобального состояния от вашего компонента

function mapStateToProps(state) {
  return {
    message: state.message

  };
}

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