自动保存时的 Redux-form 加载指示器

Question

我正在开发一个类似谷歌文档最小版本的反应应用程序。我正在使用带有两个字段 title 和 content 的 redux 表单，并且还对输入的更改进行自动提交数据。

如何实现在输入时显示Saving 并在完成提交时显示Saved 的功能？

// file: AutoSaveForm.js
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import _debounce from 'lodash.debounce'   

class AutoSaveForm extends Component {  
  render() {
    const { handleSubmit, submitting } = this.props

    return (
        <form onSubmit={handleSubmit}>
          <Field name="title" component="input" />
          <Field name="content" component="textarea" />
          <button type="submit" disabled={submitting}>
            Submit
          </button>
        </form>
    )
  }
}

export default reduxForm({
  form: 'auto_save_form',
  onChange: _debounce((values, dispatch, props, previousValues) => {
    props.submit()
  }, 800)
})(AutoSaveForm)

Answer 1

您可以使用 redux-saga 或创建自定义 redux 中间件来监听 redux-form 操作（更改、模糊、数组更改 ..等）

redux-form 导出它所有的动作类型，你可以这样导入：

    import { actionTypes } from 'redux-form';

在您的 saga 处理程序/中间件中，您可以通过发送 submit action 以编程方式提交表单

对于保存和保存状态，您可以使用isSubmitting, isDirty redux-form selector