React還原存儲與組件狀態

我有一個帶有輸入元素的組件。 Onchange，我想更新Redux商店和本地狀態，因爲我在組件中渲染了{this.state.inputValue}。React還原存儲與組件狀態

我需要它在Redux商店中的原因是用戶可以隨時點擊保存按鈕（位於不同的組件上）。

我想不出任何其他方式來保持本地狀態，並允許'保存'來訪問數據。但似乎這種做法打破了「單一的真相來源」規則。什麼是正確的方法來做到這一點？謝謝。

來源

2017-08-14 dt1000

保存按鈕組件和輸入組件是父子還是完全不同的組件？ – Umesh

在我的情況下，兄弟姐妹。輸入可以將其數據綁定到父項中的對象，該對象可以工作。但是，仍然感覺不是單一的真相來源。但我並不真誠地知道。 – dt1000

如果有幫助，你可以使用'context'。儘管你可以在父組件上用'props'做同樣的事情。 –

以下是解決問題的方法。該解決方案假定InputFormComponent和在一些ParentComponent之內，或者可以很容易地包裝成一個。

ParentComponent包裝爲connect並且可以訪問redux商店。的渲染上的抽象級別家長看起來是這樣的（有可能是兄弟姐妹或任何級別的嵌套）：

//Parent Component 
render() { 
    return (
     <InputFormComponent 
      data={this.{state|prop}.initialData} 
      userClickedSave={this.state.userClickedSave} 
      clickSavedAcknowledged={this.clickedSavedAcknowledged} 
     /> 

     <ActionComponent 
      onSaveClicked={this.onSaveClicked} 
     /> 
    ) 
}

從上面的代碼，我們可以瞭解到，ParentComponent在其state一個userClickedSave標誌。它有一個稱爲onSaveClicked的方法，當從調用時將更新this.state.userClickedSave到true。

現在讓我們看看如何InputFormComponent的行爲，以userClickedSave其componentWillReceiveProps：

//Input form component 
componentWillReceiveProps(nextProps) { 
    if (nextProps.userClickedSave && this.props.userClickedSave !== nextProps.userClickedSave) { 
     nextProps.clickSavedAcknowledged(this.state.inputValue) 
    } 
}

的InputFormComponent將監聽userClickedSave變化和正確的情況下，它會調用clickSavedAcknowledged與當前輸入值時，ParentComponent可這現在保存到了Redux店：

//Parent component 
clickSavedAcknowledged(inputValue) { 
    this.props.saveInputValue(inputValue) 

    this.setState({ 
     userClickedSave: false 
    }) 
} 

onSaveClicked() { 
    this.setState({ 
     userClickedSave: true 
    }) 
}

正如你可以看到Parent保存數據T o還原存儲並且還將userClickedSave重置爲false，因此當用戶單擊保存按鈕時可以重複該過程。

來源

2017-08-14 06:10:06

React還原存儲與組件狀態

回答

相關問題