使用 redux 加入 React Flux

Question

在下面这样的一个项目中加入（交互）Redux 和 Flux 是不是很好的解决方案？ 状态 (inputText) 在我们的组件 (TOdoInput) 中，而不是在存储中，因为它应该在 Redux 中。在 Redux 中有本地状态是否正确？

class TodoInput extends Component {

  constructor(props, context) {
    super(props, context)
    this.state = {
      inputText: ''
    }
  }

  handleChange(event) {
    this.setState({
      inputText: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault()
    this.props.addTodo(this.state.inputText)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input
            type="text"
            placeholder="Type in your todo"
            value={this.state.inputText}
            onChange={this.handleChange.bind(this)}
          />
          <input type="submit" value="Submit"/>
        </form>
      </div>
    )
  }

Answer 1

是的，它是正确的。

本地（组件状态）与全局状态（reducer）是一个值得关注的问题。

例如使用一个显示用户信息的标签栏组件

• 标签栏应该知道哪些标签是活动的。没有其他组件关心，因此它可能是由 this.state 处理的本地组件状态。
• 另一方面，选项卡的用户信息是全球关注的问题。实际上，您的许多组件应用程序都应该对显示名称、年龄等感兴趣。因此，这种状态应该存储在 reducer 中。

TodoInput 的主要作用是准备要发送到 reducer 的文本。所以输入值只在用户输入的时候很重要。

• 您可以设置文本格式
• 您可以询问服务是否有错别字
• ...

一旦您确定文本符合您的应用程序所关注的问题，您就可以验证它。在这一步，你所关心的价值发生了变化。它现在是一个可以被其他组件消耗的值。所以它必须存储在全局存储中（redux reducer）。