0

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

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

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

4

3 回答 3

3

你不需要connect再做一次。Redux-form 允许你传递mapStateToPropsandmapDispatchToProps作为第二个和第三个参数。所以你只需要，

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

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

于 2016-06-17T04:24:05.613 回答
0

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

约定是调用这个参数ownProps：

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

redux-form文档声明其map*ToProps功能应该相同。

于 2016-06-17T00:16:04.940 回答
0

我的问题并不是关于将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.
}
于 2016-06-17T15:18:58.610 回答