Question

如果我有一个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>
  );
}

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

Answer 1

一个解决方案是让操作对象有一个额外的字段（比如componentId），它会告诉减速器这个操作涉及哪个组件。

从组件

中调用此类动作创建者

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

（注意componentId现在是一个必需的道具，所以

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

你实际上可以重新使用你已经将它包装在另一个中的reducer，这会将你的reducer调用适当的状态分支（匹配componentId）

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

1 个答案: