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

为什么我不能从ownProps访问idToken和accesstoken?如果这样做不正确,应该如何访问idToken和accesstoken?

谢谢!

在mapStatetoProps和mapdispatchToProps中,ownProps参数是指组件通过属性接收的道具,例如:

< AddQuestionButton isVisible = {true} />

isVisible属性将作为ownProps传递.这样,您可以拥有一个从redux接收一些道具的组件,以及一些属性的道具.

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.

在合并道具中,您实际上将所有道具结合在一起,正如丹·阿布拉莫夫在这issue年的答案中所看到的那样:

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

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

  const toggle = isFollowing ?
    unfollowPostActionCreator :
    followPostActionCreator;

  return {
    ...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和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...