このディスパッチ機能はどのように小道具から来ていますか？

Question

あなたがこのコード行で小道具からの発送を取得するどのように私はこのアプリのコードを読んでから学ぶしようとしている、と私は混乱しています：誰かがこれを呼び出す方法を説明することができます願って

_handleSubmit(e) { 
    e.preventDefault(); 

    const { email, password } = this.refs; 
    const { dispatch } = this.props; 

    dispatch(Actions.signIn(email.value, password.value)); 
    } 

https://github.com/bigardone/phoenix-trello/blob/master/web/static/js/views/sessions/new.js#L17

.propsはディスパッチを返しますか？

Answer 1

const { dispatch } = this.props;はdispatchに変数this.props.dispatchを分解しているだけなので、小道具や小道具はどこに使われますか？ react-reduxconnectから：

export default connect(mapStateToProps)(SessionsNew); 

connect基本的に店であなたのコンポーネントを接続するだけで高次のコンポーネントです。主なアイデアはconnectが（それは別のものを返すがあなたを包み込みコンポーネントをどんな部品を取り、それがディスパッチプロパティを持つ小道具だ拡張機能に反応していることである

：このプロセスの一環として、それは、コンポーネントのprops

編集への発送を置きます成分）。また、状態からコンポーネントへのいくつかのプロパティをマップし、mapDispatchToPropsおよびmapStateToPropsを使用してディスパッチを使用してアクションをバインドすることもできます。

Answer 2

アサインメントの一例です。もっとここを参照してください：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 3

react-reduxは、コンポーネントが予測可能とパフォーマンスの方法でReduxのストアから値を得ることができますライブラリです。それが提供する主なツールは、connectと呼ばれる関数です。これは、Reduxコンポーネントをラップし、ストア値を小道具として提供します。リンク先のコードの重要な部分は、下部にあります：https://github.com/bigardone/phoenix-trello/blob/master/web/static/js/views/sessions/new.js#L70-L74。

counterという名前のReduxストアに値があるとします。あなたはそれが変更されたとき、あなたのコンポーネントCounterDisplayがこの値、および更新について知りたい：

class CounterDisplay extends Component { 
    render() { 
    const { counter, dispatch } = this.props 
    return (
     <div>{counter}</div> 
    ) 
    } 
} 

あなたが明示的に「昔ながらの方法」小道具に値を入れていない限り、これらの変数が未定義であることを行っています

connectの出番だ

<CounterDisplay counter={1} dispatch={() => {}} /> 

。それは、（しばしば呼ばれる別のコンポーネントProviderを使用して）Reduxの店を知っていて、それがラップのコンポーネントの小道具にそれから値を配置することができます。高次コンポーネント（HOC）と呼ばれるものを返します。特定の機能（この場合は店舗への接続）を実行するために別のコンポーネントをラップします。

ここでは、小道具にcounter値を取得したい方法は次のとおりです。

function mapStateToProps (state) { 
    // Slightly confusingly, here `state` means the entire application 
    // state being tracked by Redux... *not* CounterDisplay's state 
    return { 
    counter: state.counter 
    } 
} 

export default connect(mapStateToProps)(CounterDisplay) 

代わりCounterDisplay自体をエクスポートするので、我々はHOCをエクスポートします。 counterに加えて、connectは自動的にdispatch関数を小道具に挿入して、コンポーネント内でそれを利用することができます。それはあなたが見ているソースで見ている動作です。