如何識別觸發React + Flux狀態變化的組件？

什麼是標準的React + Flux方式來識別觸發狀態變化的ID組件？如何識別觸發React + Flux狀態變化的組件？

我有一個應用程序，允許用戶使用HSL顏色空間創建調色板。

這裏是我的應用程序的組件結構：

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（我使用迴流）處理一個滑塊變化事件：

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

我的調色板是HSL顏色值的數組，所以像：

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

「顏色」是上述三項數組之一，我將顏色數組中的每個項目稱爲「顏色部分」，因爲它代表顏色的H，S或L。

通過顏色和顏色部分索引作爲道具似乎不雅。我目前正在建設的組成部分是這樣的：

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

至於我可以告訴大家，我需要通過colorIndex作爲道具，這樣我的孩子組件可以知道它映射的顏色調色板，以讓我可以將這些知識傳遞給商店。

什麼是常用的React + Flux方式來做到這一點？

來源

2015-09-25 Matt Parrilla

使用colorIndex很好。不應該顏色= {this.props.palette [i]}是顏色= {顏色}，但。 –

謝謝，應該是{color} –

@MattParrilla，這取決於你可以一次修改多少種顏色。如果只有一個 - 比你可以在商店中保留'currentColor'屬性並且通過顏色索引道具。但是如果你可以修改多個collors - 比你擁有一個2-store-view關係，並且我沒有看到更好的方法。其實，你爲什麼覺得這樣很不雅？ –

我會建議不要讓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) {...}

應該得到整個顏色（陣列），並激活相應的迴流與它的行動和指數。這樣ColorPicker只需用改變的新顏色來觸發onChange函數。

對顏色選擇器內的每個滑塊執行相同的技巧。將它傳遞給已經綁定到其partIndex的onChange函數。當該功能被觸發時，ColorPicker應該構造一個新的顏色數組，並調用它自己的onChange支柱。

希望它很清楚。動機是 - 每個組件都應該得到一個簡單的回調函數並輸出它所負責的內容。它不需要知道任何其他細節。而不是傳遞越來越多無用的索引道具，只是傳遞有界的回調。它將簡化您的組件，並讓您的高級組件處理構建Flux操作本身的細節。

來源

2015-09-27 00:59:30 lyosef

這與我原來的實現類似，但我有一些同事指出使用回調不是純粹的「通道數據流「。那麼問題是：當涉及到數據流的方向時，我們是否應該成爲專制主義者？如果沒有，線路在哪裏？ –

有趣的是，一些支持Facebook教程回調的證據：https://facebook.github.io/react/docs/tutorial.html#callbacks-as-props –

我認爲傳遞迴調仍然表現出「單向性數據流「思維。與Flux合作的「數據減少，行動起來」的總體思路是，組件不應該直接改變其他組件，而是渲染一個模型，並可能觸發可能改變該模型的操作。國際海事組織是一個高層次的組件，它傳遞迴調，但是本身觸發一個動作（並且只能接收它的新數據），這仍然是該原則的堅實實現。 – lyosef

如何識別觸發React + Flux狀態變化的組件？

回答

相關問題