使用本地状态作为输入值和 redux 存储答案

【问题标题】：using local state for input value with redux store使用本地状态作为输入值和 redux 存储
【发布时间】：2019-09-29 09:58:38
【问题描述】：

我开始学习 redux，我有以下问题。所以我有一个具有初始状态的 redux 存储，并且我还有一个负责（调度操作）用户输入数据的组件。因此，如果输入是受控的，我应该在 redux 存储 (initialState) 中设置它们的 value 属性并在每次 value 更改时调度一个动作，还是应该使用组件的本地状态 -

 class Calc ...
   constructor(props){
       super(props);
       this.handleChange = this.handleChange.bind(this);
       this.state = {
           inputVal: ''
       }
   }

   handleChange(e){
      this.setState({
         [e.target.name]: e.target.value
      })
   }

   render(){
     return(
          <div>
              <input type="text" name="inputVal" value={this.state.inputVal} onChange={this.handleChange} />
          </div>
     )
   }

【问题讨论】：

标签： reactjs redux state

【解决方案1】：

在我看来，在你在 redux store 中存储东西之前，你应该问自己一些问题：

如果我的状态“inputVal”将在其他组件之间共享？
如果我的“inputVal”的变化对其他组件有一些影响

如果您得到绝对答案“YES”，您可能需要将此状态“inputVal”存储在 redux 状态中。

如果否，则不需要将此状态存储在 redux 中。而不是它，只需处理组件“Cal”中的状态

【讨论】：

【解决方案2】：

当组件连接到 Redux 存储时，它会收到有关对存储所做更改的通知。

所以如果
- 两个或更多组件将受益于状态更改通知和
- 这些组件不是父子类型的关系，因为通常父母很容易意识到与自己和孩子相关的变化，然后通过改变它的道具让孩子知道它应该做什么

然后使用 Redux 存储。

此外，当只需要通知一个（或多个）组件导航更改时，例如用户使用后退/前进浏览器按钮，可能会出现完全不同的情况。在这种情况下，也可以使用 Redux，与 Router 结合使用，它会自动将操作转移到带有相关负载的 Redux 存储。

【讨论】：