React-Redux mapDispatchToProps non riceve mapStateToProps

Question

Nella mia funzione mapStateToProps ho impostato idToken e accessToken in valori memorizzati nello stato. Funziona, dato che sono stato in grado di fare riferimento a questi valori dal componente. Nel mapDispatchToProps provo ad usare questi oggetti di scena come argomenti nella mia azione. Tuttavia, ownProps è un oggetto vuoto. Perché non ha idToken e accessToken?

contenitore:

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 

componente:

'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 

Perché non è possibile accedere idToken e accessToken da ownProps? Se ciò avviene in uno schema errato, come si può accedere a idToken e accessToken?

Grazie!

Answer 1

In mapStateToProps e mapDispatchToProps, il parametro ownProps riferisce al puntelli componente riceve tramite attributi, per esempio:

<AddQuestionButton isVisible={ true } />

L'attributo isVisible verrà passato come ownProps. In questo modo, puoi avere un componente che riceve alcuni oggetti di scena dalla redux e alcuni oggetti di scena dagli attributi.

Il metodo connect in se ha un terzo parametro chiamato mergeProps:

[mergeProps (stateProps, dispatchProps, ownProps): oggetti di scena] (Funzione): Se specificato, viene passato il risultato di mapStateToProps() , mapDispatchToProps() e gli oggetti di scena principali. L'oggetto semplice che si restituisce da verrà passato come oggetti di scena al componente spostato. È possibile che specifichi questa funzione per selezionare una porzione dello stato in base agli oggetti di scena o per associare i creatori di azioni a una determinata variabile da oggetti di scena. Se lo si omette, Object.assign ({}, ownProps, stateProps, dispatchProps) viene utilizzato per impostazione predefinita.

Negli oggetti di scena di unione, in effetti potrete combinare tutti oggetti di scena insieme, come si può vedere in questa risposta da Dan Abramov a questo 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)