Reusable ReactコンポーネントのReduxアクションの送信

Question

Reactコンポーネントを2回使用している場合、関連する値を変更するためにアクションを送信するにはどうすればよいですか？例：

//index.js 
ReactDOM.render(
    <Provider store={store}> 
    <div> 
     <ComponentContainer/> 
     <ComponentContainer/> 
    </div> 
    </Provider>, 
    document.getElementById('home') 
); 

//container.js 
const mapStateToProps = (state) => ({ 
    value: state.value, 
}); 
const mapDispatchToProps = (dispatch) => ({ 
    changeValue : (value) => { 
    dispatch(changeValueStore(value)); 
    } 
}) 
export default const ComponentContainer = connect(mapStatetoProps)(Component) 

//component.js 
export default function Component(props){ 
    return (
    <div onClick={handleChange(props.value++)}> 
     {props.value} 
    </div> 
); 
} 

この構造でComponentContainerの2つの値を分離するにはどうすればよいですか？私はコンテナのIDに減速材を渡すべきだとわかっていますが、どこが分からないのですか？

Answer 1

解決策の1つは、アクションオブジェクトが、このアクションに関係するコンポーネントを減速機に知らせる追加のフィールド（たとえばcomponentId）を持つことです。

あなたが実際にあなたがすでにだけでラップしている減速機を再利用することができそう

<Provider store={store}> 
    <div> 
    <ComponentContainer componentId="c1" /> 
    <ComponentContainer componentId="c2"/> 
    </div> 
</Provider> 

（componentIdが今、必要な小道具であることに注目してください）コンポーネント

<div onClick={handleChange(props.value++, props.componentId)}> 

内からこのようなあなたのアクションの作成者を呼び出しますそれはあなたの減速機を状態の適切な支店と呼ぶ別のものです（componentIdと一致）