Question

我有一个表单向导，我不得不将其拆分成不同名称的表单，因为否则我们在使用sagas进行异步验证时会遇到问题。
提交最后一个表单后，我想从所有表单（根据注册类型动态命名）中读取/合并值，命名模式为'customerRegistrationStep'/'businessRegistrationStep'+ [步骤号]
现在，我的丑陋解决方案是在父组件中有一个提交处理程序，该父处理程序连接到整个状态并在触发时运行redux-form的getFormValues选择器。
我希望能够以一种更简洁的方式读取值，而不必将完整的状态作为prop。
这是与提交处理程序相连的组件：

export class RegistrationForm extends React.Component<Props> {
    handleSubmit = () => {
        console.log(
            getRegistrationFormsValues(this.props.registrationType, this.props.state),
        );
    };
    shouldComponentUpdate(nextProps: Props) {
        return nextProps.registrationType !== this.props.registrationType;
    }
    render(): React.Node {
        return (
            <Wizard
                onSubmit={this.handleSubmit}
                registrationType={this.props.registrationType}
            />
        );
    }
}

const mapStateToProps = state => ({
    state: state,
});

export default connect(mapStateToProps)(RegistrationForm);

这是运行选择器的帮助函数：

const getRegistrationFormsValues = (
    registrationType: RegistrationType,
    state: any,
): Array<any> => {
    const formNames = getRegistrationFormsNames(registrationType);
    return formNames.map(formName => {
        return { [formName]: getFormValues(formName)(state) };
    });
};

如何按需读取Redux表单数据？

0 个答案: