web-dev-qa-db-ja.com

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にどのようにアクセスする必要がありますか？

ありがとう！

reduxreact-redux
19
Cole

mapStateToPropsおよびmapDispatchToPropsでは、ownPropsパラメータは、コンポーネントが属性を介して受け取る小道具を参照します。次に例を示します。

<AddQuestionButton isVisible={ true } />

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

connect メソッド自体には、mergePropsと呼ばれる3番目のパラメーターがあります。

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

マージプロップでは、実際にすべてのプロップを組み合わせることができます。DanAbramovによるこの回答 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)
33
Ori Drori