自动保存时的 Redux 表单加载指示器

Question

我正在开发一个类似于 google 文档的最小版本的 React 应用程序。我正在使用带有两个字段 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 中间件

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

    import { actionTypes } from 'redux-form';

在您的 saga handler/middleware 中，您可以通过调度 submit action

以编程方式提交表单

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

自动保存时的 Redux 表单加载指示器

Redux-form loading indicator while auto saving

reactjs

react-redux

redux-form