React-Redux mapDispatchToProps 没有收到 mapStateToProps

Question

在我的 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

为什么我无法从 ownProps 访问 idToken 和 accessToken？如果这是一个不正确的模式，应该如何访问 idToken 和 accessToken？

谢谢！

Answer 1

在mapStateToProps和mapDispatchToProps中，ownProps参数是指组件通过属性接收的props，例如：

<AddQuestionButton isVisible={ true } />

isVisible 属性将作为 ownProps 传递。通过这种方式，您可以拥有一个从 redux 接收一些 props 的组件，以及从 attributes 接收一些 props 的组件。

connect 方法本身有第三个参数 mergeProps:

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): If specified, it is passed the result of mapStateToProps(), mapDispatchToProps(), and the parent props. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, Object.assign({}, ownProps, stateProps, dispatchProps) is used by default.

在合并道具中，您实际上可以将所有道具组合在一起，正如您在 Dan Abramov 对此 issue:

的回答中看到的那样

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)

React-Redux mapDispatchToProps 没有收到 mapStateToProps

React-Redux mapDispatchToProps not receiving mapStateToProps

redux

react-redux