了解所有 redux-forms 已成功提交的最佳方法是什么？

Question

我在页面上有 N 个 redux 表单，每个表单都有自己的带有验证规则的提交处理程序。

当用户点击所有表单之外的“提交”按钮时（使用 Remote Submit），我触发了每个表单的提交，并想了解我在哪里以及如何捕获每个表单的事件表单已提交成功。如果所有表单都有效 - 我需要将用户重定向到另一个页面。

能否请您提供一些如何实现的建议？

Answer 1

关于解决方案：

在您的初始存储状态中有变量 submittedForms = 0 和 allFormsSubmitted = false；
在每次提交表单时，发送一个将 submittedForms 加 1 的操作，并且仅当 state.submittedForms === N 时才设置 allFormsSubmitted = true。然后可能还重置计数器。
让另一个组件监听 allFormsSubmitted 的变化。

另一个是，在每次提交表单时，直接从商店中读取由 redux-forms 生成的状态，以获取诸如 submitted=true 之类的标志，它可能存在于您定义的每个表单中。如果所有人都设置了标志，则触发一个使 allFormsSubmitted = true 的动作。这样，您就不必管理表单的数量 N（容易更改）。

编辑：监听 redux-forms 动作的自定义 reducer 示例：

let N = 7;
let defaultState = {
    allFormsSubmitted: false,
    submittedForms: {},
}    

let customReducer = (state = defaultState, action) => {
  switch (action.type) {

    case "SUBMIT_SUCCEDED":   // the same as the redux-forms action type - just a string
      state.submittedForms[action.formName] = true;
      if (Object.keys(submittedForms).length === N) {
        state.allFormsSubmitted = true;
      }
      return {...state};

    case "SUBMIT_FAILED":
      state.submittedForms[action.formName] = false;
      state.allFormsSubmitted = false;
      return {...state};

  ...  
  }
}

Answer 2

where and how I can catch the event that every form has been submitted successfully and I need to redirect user to another page.

由于您同时提交所有表格，我遇到了同样的问题，这就是我设法解决此问题的方法：

回调函数传递给 action creator (createPost)

    onSubmit(values){
        this.props.createPost(values, () => {
            this.props.history.push('/');
        });

它不会重定向用户，除非 posts(forms) 成功 posted 到后端 api 或数据库，在这种情况下，用户将以编程方式重定向到('/') index.html ，只要 <Route /> 存在于 <BrowserRouter> ('react-router-dom') 主 (index.js) 文件

在 action creator 内部，我使用 axios 向后端 API 发出 post 请求，一旦它成功 posted .then() 我传递了一个回调重定向用户的功能

    import axios from 'axios';
    export const CREATE_POST = 'create_post';
    const ROOT_URL = 'http://xyz.app.com/api';
    const API_KEY = '?key=xxxxx';

    export function createPost(values, callback) {
        const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
            .then(() => callback());
        return {
            type: CREATE_POST,
            payload: request
        };
    }

您可以阅读有关编程导航的更多信息

了解所有 redux-forms 已成功提交的最佳方法是什么？

What is the best way to understand that all redux-forms have been successfully submitted?

javascript

reactjs

redux

redux-form