Redux 表单：是否可以访问 formReducer

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 的 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 中检索值的表单名称调用该函数。

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

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

如果我们希望检索多个字段，我们还可以向该函数调用添加更多参数。例如

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

以下语法是 "curried" 函数的示例。这只是 return 其他函数的名称。如果您有兴趣，请阅读 this 以了解柯里化的介绍。

Redux 表单：是否可以访问 formReducer

Redux Form: Is it possible to access formReducer

javascript

redux-form