[英]React redux store vs component state
I have a component with an input element. 我有一个带有输入元素的组件。 Onchange, I want to update the Redux store and local state, because I render {this.state.inputValue} in the component.
Onchange,我想更新Redux存储和本地状态,因为我在组件中渲染了{this.state.inputValue}。
The reason I need for it to be in the Redux store, is that the user could hit save button (which is on a different component) at anytime. 我需要将其保存在Redux存储区中的原因是,用户可以随时点击保存按钮(位于不同组件上)。
I can't think of any other way to keep local state, and allow a 'Save' to access the data. 我想不出任何其他方式来保持本地状态,并允许“保存”访问数据。 But it seems like this approach breaks the 'single source of truth' rule.
但似乎这种方法打破了“单一事实来源”规则。 What is the right way to do this?
什么是正确的方法? Thanks.
谢谢。
Here is a way to solve the problem. 这是解决问题的一种方法。 The solution assumes that the
InputFormComponent
and the ActionComponent
are within some ParentComponent
or can easily be wrapped in one. 该解决方案假定
InputFormComponent
和ActionComponent
在某些ParentComponent
或者可以很容易地包装为一个。
The ParentComponent
is wrapped with connect
and has access to redux store. ParentComponent
包含connect
并可以访问redux存储。 The Parent's render on an abstract level looks like this (there could be any level of siblings or nesting): 父级的渲染在抽象级别上看起来像这样(可以有任何级别的同级或嵌套):
//Parent Component
render() {
return (
<InputFormComponent
data={this.{state|prop}.initialData}
userClickedSave={this.state.userClickedSave}
clickSavedAcknowledged={this.clickedSavedAcknowledged}
/>
<ActionComponent
onSaveClicked={this.onSaveClicked}
/>
)
}
From the above code we can understand that the ParentComponent
has a userClickedSave
flag on its state
. 从上面的代码中,我们可以了解到
ParentComponent
的state
上有一个userClickedSave
标志。 It has a method called onSaveClicked
which when called from the ActionComponent
will update this.state.userClickedSave
to true
. 它有一个叫做方法
onSaveClicked
从调用时ActionComponent
将更新this.state.userClickedSave
至true
。
Now lets see how InputFormComponent
will behave to userClickedSave
on its componentWillReceiveProps
: 现在让我们看一下
InputFormComponent
在其componentWillReceiveProps
上对userClickedSave
表现:
//Input form component
componentWillReceiveProps(nextProps) {
if (nextProps.userClickedSave && this.props.userClickedSave !== nextProps.userClickedSave) {
nextProps.clickSavedAcknowledged(this.state.inputValue)
}
}
The InputFormComponent
will listen for userClickedSave
changes and for correct scenario, it will call clickSavedAcknowledged
with the current input value, which the ParentComponent
can now save to the redux store: InputFormComponent
将侦听userClickedSave
更改和正确的方案,它将使用当前输入值调用clickSavedAcknowledged
, ParentComponent
现在可以将其保存到redux存储中:
//Parent component
clickSavedAcknowledged(inputValue) {
this.props.saveInputValue(inputValue)
this.setState({
userClickedSave: false
})
}
onSaveClicked() {
this.setState({
userClickedSave: true
})
}
As you can see the Parent
saves data to redux store and also reset userClickedSave
back to false
, so the process can repeat when the user click the save button. 如您所见,
Parent
将数据保存到redux存储,还将userClickedSave
重新设置为false
,因此当用户单击保存按钮时,该过程可以重复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.