首页 文章

react / redux-form:如何从onSubmit返回promise?

提问于
浏览
15

我试图绕着reduxreact-reduxredux-form .

我已经设置了一个商店并添加了redux-form的reducer . 我的表单组件如下所示:

LoginForm

import React, {Component, PropTypes} from 'react'
import { reduxForm } from 'redux-form'
import { login } from '../../actions/authActions'

const fields = ['username', 'password'];

class LoginForm extends Component {
    onSubmit (formData, dispatch) {
        dispatch(login(formData))
    }

    render() {
        const {
            fields: { username, password },
            handleSubmit,
            submitting
            } = this.props;

        return (
            <form onSubmit={handleSubmit(this.onSubmit)}>
                <input type="username" placeholder="Username / Email address" {...username} />
                <input type="password" placeholder="Password" {...password} />
                <input type="submit" disabled={submitting} value="Login" />
            </form>
        )
    }
}
LoginForm.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired
}

export default reduxForm({
    form: 'login',
    fields
})(LoginForm)

这按预期工作,在redux DevTools我可以看到如何在表单输入上更新商店,并在提交表单时 login 动作创建者调度登录操作 .

我将redux-thunk中间件添加到商店并设置操作创建者以便按redux docs for Async Actions中所述登录:

authActions.js

import ApiClient from '../apiClient'

const apiClient = new ApiClient()

export const LOGIN_REQUEST = 'LOGIN_REQUEST'
function requestLogin(credentials) {
    return {
        type: LOGIN_REQUEST,
        credentials
    }
}

export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
function loginSuccess(authToken) {
    return {
        type: LOGIN_SUCCESS,
        authToken
    }
}

export const LOGIN_FAILURE = 'LOGIN_FAILURE'
function loginFailure(error) {
    return {
        type: LOGIN_FAILURE,
        error
    }
}

// thunk action creator returns a function
export function login(credentials) {
    return dispatch => {
        // update app state: requesting login
        dispatch(requestLogin(credentials))

        // try to log in
        apiClient.login(credentials)
            .then(authToken => dispatch(loginSuccess(authToken)))
            .catch(error => dispatch(loginFailure(error)))
    }
}

同样,在redux DevTools中,我可以看到它按预期工作 . 在LoginForm中的 onSubmit 中调用 dispatch(login(formData)) 时,首先调度 LOGIN_REQUEST 操作,然后调度 LOGIN_SUCCESSLOGIN_FAILURE . LOGIN_REQUEST 会将属性 state.auth.pending = true 添加到商店, LOGIN_SUCCESSLOGIN_FAILURE 将删除此属性 . (我知道这可能是我使用reselect的东西,但是现在我想保持简单 .

现在,在redux-form文档中,我读到我可以从 onSubmit 返回一个promise以更新表单状态( submittingerror ) . 但我是这样做的正确方法 . dispatch(login(formData)) 返回 undefined .

我可以在商店中使用 state.auth.status 等变量来交换 state.auth.pending 标志,其中包含请求的值,成功和失败(同样,我可能会使用重新选择或类似的东西) .

然后我可以订阅 onSubmit 中的商店并处理对此的更改 state.auth.status

// ...

class LoginForm extends Component {
    constructor (props) {
        super(props)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onSubmit (formData, dispatch) {
        const { store } = this.context
        return new Promise((resolve, reject) => {
            const unsubscribe = store.subscribe(() => {
                const state = store.getState()
                const status = state.auth.status

                if (status === 'success' || status === 'failure') {
                    unsubscribe()
                    status === 'success' ? resolve() : reject(state.auth.error)
                }
            })
            dispatch(login(formData))
        }).bind(this)
    }

    // ...
}
// ...
LoginForm.contextTypes = {
    store: PropTypes.object.isRequired
}

// ...

但是,这个解决方案感觉并不好,我不确定当应用程序增长并且可能会从其他来源发送更多操作时它是否始终按预期工作 .

我看到的另一个解决方案是将api调用(返回一个promise)移动到 onSubmit ,但我想将它与React组件分开 .

有什么建议吗?

1 回答

  • 13

    dispatch(login(formData))返回undefined

    基于the docs for redux-thunk

    内部函数的任何返回值都将作为调度本身的返回值 .

    所以,你想要的东西

    // thunk action creator returns a function
    export function login(credentials) {
        return dispatch => {
            // update app state: requesting login
            dispatch(requestLogin(credentials))
    
            // try to log in
            apiClient.login(credentials)
                .then(authToken => dispatch(loginSuccess(authToken)))
                .catch(error => dispatch(loginFailure(error)))
    
            return promiseOfSomeSort;
        }
    }
    

相关问题