Question

我一直在尝试的是从容器组件formReducer中获取值。

有两个组成部分。一个是Redux-Form的表示组件。

class Form extends React.Component {
    render() {
        return (
        <div>
            <form onSubmit={handleSubmit}>
            <Field name="title"
                   component="input"
                    type="text"/>
            </form>
        </div>
        )
    }
}

Form = reduxForm({
    form: 'PostEditor',
    enableReinitialize: true,
})(Form);

Form = connect(
    state => ({
        initialValues: state.post.post,
        enableReinitialize: true,
    }),
)(Form)

export default Form;

另一个是它的容器，我想访问formReducer。

class PostEditor extends React.Component {
    render() {
        console.log("form", this.props.PostEditor);//This results in "undefined"
        return (<Form onSubmit={data=> this.handleSubmit(data)}/>);
    }
}

const mapStateToProps = (state) => {
    return {
        PostEditor: state.form
    }
}
export default connect(mapStateToProps, null)(PostEditor);

在Redux＆＃39; store，form reducer设置为state.form，但无法访问。

是否可以从reducer中获取值？

Answer 1

尝试使用ReduxForm选择器之一。

import { getFormValues } from 'redux-form';

const mapStateToProps = (state) => {
    return {
        PostEditor: getFormValues('PostEditor')(state)
    }
}

这里有详细的文档：https://redux-form.com/7.2.0/docs/api/selectors.md/

Answer 2

要访问表单的值，请从redux-form

导入以下选择器

import { formValueSelector } from 'redux-form';

然后使用您希望检索mapStateToProps中的值的表单名称调用该函数。

这将返回一个函数，然后使用Redux存储的状态以及我们希望获取该值的字段的名称来调用该函数。

const mapStateToProps = (state) => {
    return {
        titleFieldValue: formValueSelector('PostEditor')(state, 'title')
    }
}

如果我们想要检索多个字段，我们还可以为此函数调用添加更多参数。例如

formValueSelector('PostEditor')(state, 'title', 'name', 'otherField')

以下语法是“curried”函数的示例。这只是返回其他函数的函数的名称。如果您有兴趣阅读this了解currying的介绍。

Redux表单：是否可以访问formReducer

2 个答案: