Question

我正在异步验证我的redux-form。但是the example并没有真正展示如何使用redux状态，发送动作并从状态中获取结果。那么如何从reduxForm装饰器中的@connect访问道具来实现呢？

@connect(
    state => (...)
    dispatch => ({
        actions: auth
    })
)
@reduxForm({
    form: 'auth.signup',
    fields,
    (values, dispatch) => ({
        // dispatch validation action here
    })
})

此外，将函数直接放在装饰器中会引发语法错误，但逻辑必须在那里才能访问道具，对吗？

Answer 1

您不再需要connect。 Redux-form允许您将mapStateToProps和mapDispatchToProps作为第二个和第三个参数传递。所以你只需要，

@reduxForm({
  form: 'auth.signup',
  fields,
  (values, dispatch) => ({
      // dispatch validation action here
  })
}, mapStateToProps, mapDispatchToProps).

mapStateToProsp和mapDispatchToProps都将包装组件的props作为第二个参数。

Answer 2

mapStateToProps和mapDispatchToProps的第二个参数是表示传递给组件的props的对象。

惯例是调用此参数ownProps：

@connect(
    (state, ownProps) => ...,
    (dispatch, ownProps) => ...
)

redux-form documentation表明其map*ToProps函数应该相同。

Answer 3

我的问题并不在于放置map*ToProps函数的位置，我只是忽略了redux-form为您提供dispatch参数的事实，该参数允许您再次绑定动作创建者纯粹是为了使用运行动作进行验证。

它还需要将函数从装饰器中移出一个常量，就像问题中链接的示例一样。

以下是任何感兴趣的人的完整示例：

import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { reduxForm } from 'redux-form';

import * as auth from 'actions/auth';

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

const asyncValidate = (values, dispatch) => {
    return new Promise((resolve, reject) => {
        if(values.username) {
            let authActions = bindActionCreators(auth, dispatch);
            authActions.checkUsernameValid(values.username);
            resolve();
        }
    });
};

@reduxForm(
    {
        form: 'auth.login',
        fields,
        asyncValidate,
        asyncBlurFields: [ 'username' ]
    },
    state => ({
        usernameValid: state.auth.usernameValid,
        usernameValidError: state.auth.usernameValidError
    }),
    dispatch => ({
        authActions: bindActionCreators(auth, dispatch)
    })
)
export default class Login extends Component {
    // Component here which has access to authActions
    // if the form successfully submits.
}

访问ES7装饰器中的道具

3 个答案: