在 ES7 装饰器中访问道具

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

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

惯例是调用这个参数ownProps:

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

redux-form documentation 声明它的 map*ToProps 功能应该是相同的。

Answer 2

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

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

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

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 装饰器中访问道具

Access props in an ES7 decorator

decorator

reactjs

redux

redux-form