React还原存储与组件状态

问题描述：

我有一个带有输入元素的组件。 Onchange，我想更新Redux商店和本地状态，因为我在组件中渲染了{this.state.inputValue}。React还原存储与组件状态

我需要它在Redux商店中的原因是用户可以随时点击保存按钮（位于不同的组件上）。

我想不出任何其他方式来保持本地状态，并允许'保存'来访问数据。但似乎这种做法打破了“单一的真相来源”规则。什么是正确的方法来做到这一点？谢谢。

保存按钮组件和输入组件是父子还是完全不同的组件？ – 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，因此当用户单击保存按钮时可以重复该过程。

React还原存储与组件状态

相关推荐