掌握 React 中 Flux 背后的理论

Posted 2023-02-22

【中文标题】掌握 React 中 Flux 背后的理论

【英文标题】：Grasping the theory behind Flux in React

【发布时间】：2015-12-31 08:12:28

【问题描述】：

我一直在将类似 Flux 的架构应用到我的 React 应用程序中，我想知道应用程序状态是否真的应该保存在商店而不是组件中。似乎在某些情况下，让某些组件保持自己的状态可能会很好。

例如，下面的自我意识FormElement。我无法想象使用类似 Flux 的架构来编写它，其中所有内容都作为操作发送到商店。商店如何可能跟踪所有不同的表单元素及其父表单？

简而言之：让一些组件跟踪自己的状态，而大多数其他组件使用调度是否可以接受？

FormElement = React.createClass(
  displayName: 'FormElement',

  validations: 
    email: /^[A-Za-z0-9-._+]+@[A-Za-z0-9-]+[.A-Za-z0-9-]*\.[A-Za-z]2,$/,
    password: /.6,/
  ,

  propTypes: 
    id: React.PropTypes.string.isRequired,
    label: React.PropTypes.string.isRequired,
    type: React.PropTypes.string,
    required: React.PropTypes.bool
  ,

  getDefaultProps() 
    return 
      type: 'text',
      required: false,
      disabled: false
    
  ,

  getInitialState() 
    return 
      focused: false,
      filled: false,
      valid: true,
      invalidMessage: ''
    
  ,

  handleFocus(focusing) 
    let valid = true, errMsg = '';
    let inputVal = React.findDOMNode(this.refs.inputField).value;

    this.setState(focused: focusing);

    if (!focusing) 
      // Do some validations on blur
      if (this.props.required && !this.state.filled) 
        valid = false;
        errMsg = this.props.label + ' is required';
      

      if (this.props.type === 'email' &&
        this.state.filled && !this.validFormat(inputVal, 'email')) 
        valid = false;
        errMsg = 'Invalid email address';
       else if (this.props.type === 'password' &&
        this.state.filled && !this.validFormat(inputVal, 'password')) 
        valid = false;
        errMsg = 'Password too short';
      
    

    this.setState(valid, invalidMessage: errMsg, function () 
      // Notify parent that something changed
      //this.props.onAction(this);
    );
  ,

  handleChange(target) 
    this.setState(
      value: target.value,
      filled: target.value.length > 0
    );
  ,

  validFormat(str, type) 
    return !!str.match(this.validations[type]);
  ,

  render() 
    let formElement;
    const labelClasses = classNames(
      'focused': this.state.focused || this.state.filled
    );
    const groupClasses = classNames(
      'form-group': true,
      'has-error': !this.state.valid
    );

    if (_.contains(['text', 'email', 'password'], this.props.type)) 
      formElement = (
        <div className=groupClasses>
          <label
            className=labelClasses
            htmlFor=this.props.id>
            this.state.invalidMessage ?
              this.state.invalidMessage : this.props.label
          </label>

          <input type=this.props.type
                 className="form-control"
                 id=this.props.id
                 ref="inputField"
                 onFocus=this.handleFocus.bind(null, true)
                 onBlur=this.handleFocus.bind(null, false)
                 onChange=this.handleChange
                 disabled=this.props.disabled />
        </div>
      );
     else if (this.props.type === 'submit') 
      formElement = (
        <div>
          <button type="submit"
                  className="btn btn-primary"
                  disabled=this.props.disabled>this.props.label
          </button>
        </div>
      );
    

    return formElement;
  
);

【参考方案1】：

通量模式主要用于处理服务器和组件之间的数据。我还使用 app.store 处理影响多个组件的状态，使用 api.store 处理处理服务器 api 的操作（请求或保存数据）。

如果状态的范围仅涉及单个组件，那么您可以将状态包含在组件内。