我尝试使用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配置错误,但我觉得我就像所描述的例子一样。
如果我在道具中传递登录功能并将其传递给handleSubmit
,就像这样
<form onSubmit={handleSubmit(() => {login()})}>
onSubmit
函数被调用,但它在SET_SUBMIT_SUCCEEDED
之前被调用,这使我认为我添加的任何验证都不起作用,并且无论如何都会提交。
答案 0 :(得分:3)
您的login
函数似乎应该有不同的签名。
查看文档http://redux-form.com/6.2.0/docs/api/ReduxForm.md/
将使用以下参数调用onSubmit:
values:Object {field1:'value1',field2:'value2'}形式的字段值。
dispatch:Function Redux调度功能。
props:Object 道具传递到您的装饰组件。
尝试类似:
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 })))
}
}
答案 1 :(得分:3)
这有效
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 })))
}