如何识别触发 React+Flux 状态变化的组件？

Question

标识触发状态更改的组件的规范 React+Flux 方法是什么？

我有一个应用程序允许用户使用 HSL 颜色创建调色板 space。

这是我的应用程序的组件结构：

Container (this component gets state and passes it down the chain)
 | PalettePicker
   | ColorPicker
     | Slider (this component fires action)
     | Slider
     | Slider
   | (As many ColorPickers as colors)
 | ImageSamples (not relevant, but dependent on palette)

下面是 ColorPicker 组件：

每个 ColorPicker 包含 3 个 Slider 组件，这些组件触发更新商店的事件。然后商店更新调色板并将整个调色板传递给 Container 组件，后者将它作为 props 传递给它的子组件。

这是我在 Store 中处理滑块更改事件的函数（我正在使用 Reflux）：

sliderChange: function(newValue) {
    var modifiedPalette = this.palette;
    modifiedPalette[newValue.colorIndex][newValue.colorPartsIndex] = newValue.value;
    this.trigger(modifiedPalette)
}

我的调色板是一组 HSL 颜色值，所以类似于：

[ [350, 100, 50], [340, 100, 40], ... ]

A "color" 是上面的 3 项数组之一，我将颜色数组中的每个项目称为 "color part"，因为它代表颜色的 H、S 或 L颜色.

将颜色和颜色部分索引作为道具向下传递似乎不雅。我目前正在构建这样的组件：

colorPickers = palette.map(function(color, i) {
    return (
        <ColorPicker 
             key={i}
             colorIndex={i}
             color={color}
        />
    )
});

据我所知，我需要将 colorIndex 作为道具传递，以便我的子组件可以知道它映射到调色板中的哪种颜色，以便我可以将该知识传递给商店.

惯用的 React+Flux 方法是什么？

Answer 1

我建议不要让 ColorPicker 组件自己调用任何操作，而是将其作为 "onChange" 道具传递。它不需要知道它是什么索引。您可以绑定 onChange 函数，以便它传递索引：

colorPickers = palette.map(function(color, i) { 
   return ( 
      <ColorPicker key={i} 
          onChange={this.changeColor.bind(this, i)} 
          color={color} 
      /> 
   ) 
});

changeColor 函数如下所示：

changeColor : function(colorIndex,  colorArray) {...}

它应该接收整个颜色（数组）并用它和索引触发适当的 Reflux 动作。这样 ColorPicker 只需要用改变的新颜色触发 onChange 函数。

对颜色选择器中的每个滑块执行相同的操作。向它传递一个已经绑定到其 partIndex 的 onChange 函数。当该函数被触发时，ColorPicker 应该构造一个新的颜色数组，并调用它自己的 onChange 属性。

希望已经足够清楚了。动机是——每个组件都应该有一个简单的回调函数，并且只输出它负责的内容。它不需要知道任何其他细节。与其向下传递越来越多无用的索引属性，不如传递有界回调。它将简化您的组件，并让您的高级组件处理构建 Flux 操作本身的细节。

如何识别触发 React+Flux 状态变化的组件？

How to Identify components that trigger changes to state in React+Flux?

flux

reactjs

refluxjs