reduce states mapDispatchToPropsは、状態が更新されるたびに新しい関数を作成しますか？

Question

JSXの小道具で.bindを使用するか、Arrow関数を使用します。 JSXの小道具でバインドコールまたは arrow関数を使用すると、すべての の単一レンダリングにまったく新しい機能が作成されます。

つまり、cardList.lengthという新しい機能がコンポーネントを再描画するたびに作成されるということですか？

const cards = cardList.map(card => 
     <TouchableOpacity key={card.id} onPress={() => props.pressCard(card)}> 
     <Card {...card} /> 
     </TouchableOpacity> 
); 

この場合、ReduxのmapDispatchToPropsはどうですか？たとえば、

const mapDispatchToProps = (dispatch) => ({ 
    pressCard: (card) => dispatch(homeActions.pressCard(card)) 
}); 

コンポーネントの状態が更新されると新しい機能が作成されますか？

Answer 1

私は、

onPress={() => props.pressCard(card) 

はcardList.length新機能

これはコンストラクタで一度機能をクラスを使用してコンポーネントを作成してバインドすることです克服する方法、

をやっていることを確認し作成しています

例：

class Card extends React.Component { 
    constructor(props) { 
    super(props) 

    this.handlePressCard = this.handlePressCard.bind(this) 
    } 
    handlePressCard(e) { 
    const card = e.currentTarget.dataset.id 
    // Find the card with the above `id` 
    this.props.pressCard(card) 
    } 
    render() { 
    return (
     cardList.map((card) => (
     <TouchableOpacity key={card.id} data-id={card.id} onPress={this.handlePressCard}> 
      <Card {...card} /> 
     </TouchableOpacity> 
    )) 
    ) 
    } 
} 

QUES-2：

実装の詳細によります。私が知っている限り、store.getState（）との比較やオブジェクトの操作（私も間違っているかもしれません）と比較せずに同じオブジェクトを返すのであれば、一度だけロードされます。

Answer 2

mapDispatchToProps関数は、返すように書いたものを返します。あなたの例では、新しいpressCard()関数が実行時に小道具として返されます。

ただし、デフォルトconnectによっては一度だけあなたのコンポーネントのインスタンスが作成されを、あなたのmapDispatch関数を呼び出します。 ではありません。は、アクションがディスパッチされたときに再び呼び出されます。

次の2つのパラメータを取るよう、あなたのmapDispatch関数を宣言した場合、それはこのように、2番目の引数として包まれたコンポーネントの小道具で呼び出されます：その場合は

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    pressCard: (card) => dispatch(homeActions.pressCard(card, ownProps.itemId)) 
}); 

、それは再びいつでも呼び出されます入ってくる小道具は変わりますが、それはおそらく「すべての派遣された行動」のためではありません。

使用が簡単である結合法のための「オブジェクト速記」構文が、あります：

const actions = { 
    pressCard : homeActions.pressCard 
} 

export default connect(mapState, actions)(MyComponent);