Redux Form v6 - 正在調用onSubmit函數，但不調度動作

Question

我正在嘗試使用redux-form設置一個簡單的表單。

現在我只有一個按鈕，應該發送一個動作。 我看到SET_SUBMIT_SUCCEEDED操作，所以我知道表單已成功提交，我可以看到我指定的onSubmit函數被調用，但它沒有調度一個動作。

// root reducer
import { combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'
import login from './login'

export default combineReducers({
  login,
  form: reduxFormReducer
})


// action-creator
import { createAction } from './create_action'
import { postJson } from './fetch'
import {
  LOGIN_ERROR,
  LOGIN_REQUEST,
  LOGIN_SUCCESS
} from '../constants/constants'

const login = () => {
  return function (dispatch) {
    dispatch(createAction(LOGIN_REQUEST))
    return postJson('/login')
      .then(res => res.json())
      .then(data =>
        dispatch(createAction(LOGIN_SUCCESS, { data }))
      )
      .catch(error => dispatch(createAction(LOGIN_ERROR, { error })))
  }
}


//component
import React from 'react'
import { reduxForm } from 'redux-form'
import login from '../redux/submit-handlers/login'

const Login = (props) => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <h3>Login</h3>
      <button>Login</button>
    </form>
  )
}

export default reduxForm({
  form: 'login',
  onSubmit: login
})(Login)



//create_action
export const createAction = (type, payload) => {
  return {
    type,
    payload
  }
}

我在其他組件中使用此方法調度操作沒有任何問題。 我必須讓redux配置錯誤，但我覺得我就像所描述的例子一樣。

如果我在props中傳遞登錄功能並將其傳遞給handleSubmit就像這樣

<form onSubmit={handleSubmit(() => {login()})}>

調用onSubmit函數，但它在SET_SUBMIT_SUCCEEDED之前被調用，這使我認為我添加的任何驗證都不起作用，無論如何它都會提交。

Answer 1

您的login功能似乎應該有不同的簽名。

從查看文檔http://redux-form.com/6.2.0/docs/api/ReduxForm.md/

將使用以下參數調用onSubmit：

values：Object字段值，格式為{field1：'value1'，field2：'value2'}。

dispatch：Function Redux調度功能。

props：Object傳遞到裝飾組件的props。

嘗試類似的東西：

const login = ({dispatch}) => {
  dispatch(createAction(LOGIN_REQUEST))
  return postJson('/login')
    .then(res => res.json())
    .then(data =>
      dispatch(createAction(LOGIN_SUCCESS, { data }))
    )
    .catch(error => dispatch(createAction(LOGIN_ERROR, { error })))
  }
}

Answer 2

這很有效

const login = (values, dispatch) => {
  dispatch(createAction(LOGIN_REQUEST))
  return postJson('/login')
    .then(res => res.json())
    .then(data =>
      dispatch(createAction(LOGIN_SUCCESS, { data }))
    )
    .catch(error => dispatch(createAction(LOGIN_ERROR, { error })))
}