15

我正试图围绕redux、react-redux和redux-form。

我已经建立了一个商店并从 redux-form 添加了减速器。我的表单组件如下所示：

登录表单

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中间件添加到了 store 中，并按照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 中，我可以看到它按预期工作。在LoginFormdispatch(login(formData))中调用时，首先调度操作，然后是or 。将向商店添加一个属性，并将删除此属性。（我知道这可能是我可以使用重新选择的东西，但现在我想保持简单。onSubmitLOGIN_REQUESTLOGIN_SUCCESSLOGIN_FAILURELOGIN_REQUESTstate.auth.pending = trueLOGIN_SUCCESSLOGIN_FAILURE

现在，在我读到的 redux-form 文档中，我可以返回一个onSubmit更新表单状态（submitting，error）的承诺。但我不确定这样做的正确方法是什么。dispatch(login(formData))返回undefined。

我可以用一个变量来交换state.auth.pending商店中的标志，比如请求state.auth.status的值、成功和失败（同样，我可能会为此使用 reselect 或类似的东西）。

然后我可以订阅商店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 组件分开。

对此有何建议？

4

1 回答 1

13

dispatch(login(formData))返回undefined

基于redux-thunk 的文档：

内部函数的任何返回值都可用作dispatch自身的返回值。

所以，你会想要类似的东西

// 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;
    }
}
于 2016-01-08T22:17:04.320 回答