React-Redux mapDispatchToPropsがmapStateToPropsを受信して​​いません

Question

私のmapStateToPropsの機能では、idTokenとaccessTokenをstateに格納された値に設定しました。これは、コンポーネントからこれらの値を参照できるようになりました。 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において

Answer 1

、ownPropsパラメータは、成分は、例えば、属性を介して受信した小道具を指す：

<AddQuestionButton isVisible={ true } />

isVisible属性がownPropsとして渡されます。このようにして、reduxからいくつかの小道具を受け取り、属性からいくつかの小道具を受け取るコンポーネントを持つことができます。

connect方法自体はmergePropsと呼ばれる第三のパラメータを有する：

[mergeProps（stateProps、dispatchProps、ownProps）：小道具]（ファンクション）： 指定した場合、それはmapStateToProps（の結果を渡される）を、 mapDispatchToProps（）および親の小道具。普通のオブジェクト から返されたものは、ラップされたコンポーネントに小道具として渡されます。 は、 propsに基づいて状態のスライスを選択したり、アクション作成者をpropsの特定の変数にバインドしたりするためにこの関数を指定することができます。 省略すると、Object.assign（{}、ownProps、stateProps、dispatchProps）がデフォルトで使用されます。 マージ小道具で

、あなたが実際にあなたがこの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)