【redux】根据数组数据渲染多个相同的组件，如何在子组件分别触发dispatch(action)已达到更新数据的目的？

Question

Reducer数据结构

{
  items: [
    {
      images: 'http://xxxx.jpg',
      buttons: [
        {
          text: '购买',
          bgColor: '#fff',
        },
        {
          text: '查看详情',
          bgColor: '#fff',
        }
      ] 
    },
    { // 篇幅有限结构同上 },
    { // 篇幅有限结构同上 },
  ]
}

这是一个轮播图的数据结构，一个item一张图，图上也许会有button。
基础component组件三个: Button，SingleImage，Carousel
最终成型代码如下

class Demo extends React.Component {
  componentDidMount() {
    // dispatch(action)获取ajax数据等一系列操作，最终this.props.data为上述结构的数据
  }

  render() {
    <Carousel>
      {
        this.props.data.items.map((item, index) => (
            <SingleImage
              key={ index }
              data={ item }
              dispatch={ this.props.dispatch }
            />
          ))
        }
      }
    </Carousel>
  }
}

在组件SingleImage中渲染Button也是大致类似数据驱动：

 // jsx
 <div>
    this.props.buttons.map(button => (
      <Button data={ button } />
    ))
 </div>

需求是用户可以编辑按钮上的文字，即在Button组件中改变Reducer中的item[x]buttons[y].text。我不解的地方是如何确定这里的x和y，即哪个图下的哪个按钮。我有想法是把SingleImage和Button的key传入该Button组件中，作为Action的参数但是总感觉不合适，组件就不能完全解耦了。还请各位前辈赐教。

Answer 1

你的思路是对的，而且个人感觉是唯一办法，因为对于每个SingleImage和Button而言，只有map的时候可以确定索引值。

至于耦合的问题，可以考虑把Button做成无状态组件，点击逻辑在SingleImage中完成，这样可以做到Button解耦。

SingleImage很难做到松耦合，除非点击逻辑外置，这样需要多层传递，代价比较大。

或者更极端一点，SingleImage和Button做成一个无状态组件，点击逻辑放到Demo中

Answer 2

首先我认为要想完全解耦一个组价，得分清这个组件是一个业务组件，还是一个公用组件。要是公用组件，如果要解耦，可以从父组件传递一个方法进来，然后在didMount时调用这个方法，如果是业务组件的话，可能就没有要解耦的必要了。