React Reduxの子コンポーネントからどのようにディスパッチできますか？

私のサーバーは、このようなコードを持っていますReact Reduxの子コンポーネントからどのようにディスパッチできますか？

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout>が明らかにされ、より多くの巣のコンポーネントがあります。

私がダウンして、この深いようなクラスを持っている：

import React from 'react'; 

export default React.createClass({ 
    render: function(){ 
    var classes = [ 
     'js-select-product', 
     'pseudo-link' 
    ]; 

    if (this.props.selected) { 
     classes.push('bold'); 
    } 

    return (
     <li className="js-product-selection"> 
     <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span> 
     </li> 
    ); 
    } 
});

私は本当にむしろthis.props.onClickよりも、何をしたいのかは、set state in a reducerにイベントをディスパッチです。私は文脈についていくつかのことをオンラインで行ってきましたが、その機能があったかどうか分かっています。

EDIT 私はこのconnect methodを参照してくださいが、私は子供のコンポーネントでconnectを使用しないように読んだ誓ったかもしれません。

出典

2016-04-11 Dave Stein

あなたはあまりにも子供のコンポーネントに巻き込まれています。コンポーネントと接続されていないコンポーネントが接続されるように、アプリケーションを構造化する必要があります。接続されていないコンポーネントは、基本的にステートレスで純粋な関数でなければなりません。接続されたコンポーネントは、connect関数を使用してredux状態をpropsに、reduxディスパッチャーをpropsにマップし、それらのプロップを子コンポーネントに渡す必要があります。

アプリには多くの接続コンポーネントがあり、接続されていないコンポーネントがたくさんある場合があります。 This post（reduxの作成者による）では、UIの実際の表示を担当する非接続（ダム）コンポーネントと、非接続コンポーネントの作成を担当する接続（スマート）コンポーネントについて詳しく説明します。

例（いくつかの新しい構文を使用して）であるかもしれない。この例では

class Image extends React { 
    render() { 
    return (
     <div> 
     <h1>{this.props.name}</h1> 
     <img src={this.props.src} /> 
     <button onClick={this.props.onClick}>Click me</button> 
     </div> 
    ); 
    } 
} 

class ImageList extends React { 
    render() { 
    return (
     this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />) 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    images: state.images, 
    }; 
}; 
const mapDispatchToProps = (dispatch) => { 
    return { 
    updateImage:() => dispatch(updateImageAction()), 
    }; 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(ImageList);

、ImageListは、接続されたコンポーネントとImageが非接続コンポーネントです。

出典

2016-04-11 21:53:36 jeffora

"接続されたコンポーネントは、reduxディスパッチャーをpropsにマップするためにconnect関数を使用する必要があります"。言い換えれば、ディスパッチャーを子供の支柱として渡す。 – AKMorris