他のコンポーネントからのアクション時にコンポーネントメソッドを呼び出す

Question

コンポーネントBからのボタンをクリックすると、コンポーネントAでメソッドを呼び出す最も良い方法は何ですか？

両方のコンポーネントが互いに分離されています。 私は私のような行動をいくつかの非常に単純な実装を使用することができると信じて：

成分Aがアクションを送信します。

{action: "BUTTON_CLICKED", value: true} 

リデューサーキャッチアクション：

case "BUTTON_CLICKED": { 
     const newState = { ...state }; 
     newState.clicked = true; 
     return newState; 
    } 

成分Bは、小道具をリッスン::

を

componentWillReceiveProps = (newProps) => { 
    if (newProps.clicked) { 
     someMethod() 
    } 
}; 

リセットフラグ：

someMethod =()=>{ 
    dispatch({action: "BUTTON_CLICKED", value: false}) 
} 

しかし、この方法は間違っています。

react/reduxでコマンドパターンを実装する方法はありますか？

ありがとうございました

Answer 1

あなたが尋ねて説明しようとしているものが最良のパターンです。あなたは適切なコードを書いており、私はあなたがこれを変更する必要はないと思っています。

あなたは真実の単一の源の助けを借りてReduxを使用していますか。だからあなたが使っているものは私の見解に従ったものです。

Answer 2

「コンポーネントBのボタンをクリックしたときに、コンポーネントAでメソッドを呼び出す最良の方法は何ですか？」

モジュール間の通信にイベントバスメッセージを使用したいと思います。 1つのモジュールでイベントを発行し、他のモジュールで特定のイベントをリスンします。

例：ここではhttps://github.com/olahol/react-bus

はVueJS関連の記事http://vuetips.com/global-event-busですが、それはアイデアの概要を与える必要があります。

Answer 3

あなたがレイアウトしたアプローチは正しいようです。 Reduxにはこの機能が組み込まれています。store.subscribeを使用して変更を監視することができます。

componentWillMount() { 
    this.unsubscribe = store.subscribe(this.onStoreChange); 
} 

componentWillUnmount() { 
    this.unsubscribe(); 
} 

onStoreChange =() => { 
    const newState = store.getState(); 

    // Check if target value has changed here 
}