Reactjs 为可重用的React组件发送Redux操作

如果我使用了两次React组件，如何将操作发送到存储区以更改其中一个组件的相关值，而不是另一个组件的相关值？例如：

//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>
  );
}

//index.js
ReactDOM.render(
,
document.getElementById（'home'）
);
//container.js
常量mapStateToProps=（状态）=>({
value:state.value，
});
const mapDispatchToProps=（调度）=>({
changeValue:（值）=>{
调度（changeValueStore（value））；
}
})
导出默认常量ComponentContainer=connect（mapStatetoProps）（组件）
//component.js
导出默认功能组件（道具）{
返回(
{props.value}
);
}

---

如何使用此结构隔离ComponentContainer的两个值？我意识到我应该将容器ID分配给reducer，但我不确定在哪里。

一个解决方案是让action对象有一个额外的字段（比如

componentId

），它会告诉reducer这个操作涉及哪个组件

在组件中这样调用动作创建者

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

实际上，您可以重用已经存在的reducer，只需将它包装到另一个中，这将使用适当的状态分支调用reducer（匹配

组件ID

）

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