React-Redux mapDispatchToProps не получает mapStateToProps

В моей функции mapStateToProps я установил idToken и accessToken значения, хранящиеся в состоянии. Это работает, так как я смог сослаться на эти значения из компонента. В mapDispatchToProps я пытаюсь использовать эти реквизиты в качестве аргументов в своем действии. Однако ownProps — это пустой объект. Почему нет idToken и accessToken?

контейнер:

import { connect } from 'react-redux'
import { toggleAddQuestionModal, fetchFriends } from '../actions'
import AddQuestionButtonComponent from '../components/AddQuestionButton'

const mapStateToProps = (state) => {
  auth = state.auth
  return {
    idToken: auth.token.idToken,
    accessToken: auth.profile.identities[0].accessToken,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    didPress: (idToken, accessToken) => {
      dispatch(toggleAddQuestionModal(true))
      dispatch(fetchFriends(ownProps.idToken, ownProps.accessToken))
    }
  }
}

AddQuestionButton = connect(
  mapStateToProps,
  mapDispatchToProps
)(AddQuestionButtonComponent)

export default AddQuestionButton

составная часть:

'use strict';

import React, {
  Text,
  View,
  TouchableHighlight,
  PropTypes,
} from 'react-native'

import styles from './styles'

const AddQuestionButton = ({ didPress, idToken, accessToken }) => (
  <TouchableHighlight style={styles.actionButton} onPress={didPress(idToken, accessToken)}>
    <Text style={styles.actionButtonText}>+</Text>
  </TouchableHighlight>
)
AddQuestionButton.propTypes = {
  idToken: PropTypes.string.isRequired,
  accessToken: PropTypes.string.isRequired,
  didPress: PropTypes.func.isRequired,
}

export default AddQuestionButton

Почему я не могу получить доступ к idToken и accessToken из ownProps? Если это неправильный шаблон, как получить доступ к idToken и accessToken?

Спасибо!


redux react-redux
person Cole    schedule 09.04.2016    source источник

Ответы (1)


arrow_upward
33
arrow_downward

В mapStateToProps и mapDispatchToProps параметр ownProps относится к свойствам, которые компонент получает через атрибуты, например:

<AddQuestionButton isVisible={ true } />

Атрибут isVisible будет передан как ownProps. Таким образом, у вас может быть компонент, который получает некоторые реквизиты от избыточности и некоторые реквизиты от атрибутов.

Метод connect сам имеет третий параметр с именем mergeProps:

[mergeProps(stateProps, dispatchProps, ownProps): props] (функция): если указано, передается результат mapStateToProps(), mapDispatchToProps() и родительских реквизитов. Обычный объект, который вы возвращаете из него, будет передан в качестве реквизита обернутому компоненту. Вы можете указать эту функцию для выбора части состояния на основе реквизита или для привязки создателей действий к определенной переменной из реквизита. Если его опустить, по умолчанию используется Object.assign({}, ownProps, stateProps, dispatchProps).

В реквизитах слияния вы фактически можете объединить все реквизиты вместе, как вы можете видеть в этом ответе Дэна Абрамова на этот проблема:

function mapStateToProps(state, ownProps) {
  return {
    isFollowing: state.postsFollowing[ownProps.id]
  };
}

function mergeProps(stateProps, dispatchProps, ownProps) {
  const { isFollowing } = stateProps;
  const { dispatch } = dispatchProps;
  const { id } = ownProps;

  const toggle = isFollowing ?
    unfollowPostActionCreator :
    followPostActionCreator;

  return {
    ...stateProps,
    ...ownProps,
    toggleFollow: () => dispatch(toggle(id)))
  };
}

ToggleFollowButton = connect({
  mapStateToProps,
  null, // passing null instead of mapDispatchToProps will return an object with the dispatch method
  mergeProps
})(ToggleFollowButton)
person Ori Drori    schedule 10.04.2016