Redux-form:从状态设置表单值 [英] Redux-form: Set form values from state

问题描述

我有一个名为 addContactForm 的 redux 表单.此表单通过插件侦听我的应用程序中的某些操作.请参阅下面的代码以获取说明:

I have a redux-form called addContactForm. This form listens to some actions in my application through a plugin. See code below for an illustration:

/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form'
import AddContactFormPlugin from './add-contact-form-plugin';

const rootReducer = combineReducers({
    form:        reduxFormReducer.plugin({
        addContactForm: AddContactFormPlugin
    })
});

export default rootReducer;

/reducers/add-contact-form-plugin.js

import { SET_CURRENT_CONTACT, CLEAR_CURRENT_CONTACT } from '../constants';
export default function (state, {type, payload}) {
    switch (type) {
        case SET_CURRENT_CONTACT:
            // !!! MY PROBLEM IS ON THE NEXT LINE
            return {...state, values: { ...payload }};
        case CLEAR_CURRENT_CONTACT:
            return {...state, values: getEmptyValues()};
        default:
            return state;
    }
}

function getEmptyValues() {
    return {
        firstName: '',
        lastName: '',
        phone: ''
    }
}

为了澄清这里发生的事情:当类型为 SET_CURRENT_CONTACT 的操作流入这个 reducer 时，我将表单值设置为用户选择的联系人的值.这部分工作正常.

To clarify what is happening here: when the action with type SET_CURRENT_CONTACT flows into this reducer, I set the form values to those of the contact person that was selected by the user. This part works correctly.

然而，该表单现在被标记为 !pristine &&肮脏的.因此，我的提交按钮并未禁用，实际上应该禁用，直到用户决定进行任何更改.

HOWEVER, the form is now marked as !pristine && dirty. As a result, my submit button is not disabled, which it actually should be until the user decides to make any changes.

所以我的问题是:如何更新表单状态以将其标记为原始状态?

So my question is: how can I update the form state so that it is marked as pristine?

(或者我猜无效，但原始感觉是更好的选择)

(or invalid I guess, but pristine feels like a better option)

我曾尝试简单地设置状态对象中的值，但这并没有做任何事情:return {...state, values: { ...payload }, pristine: true };

I have tried simply setting the value in the state object but this is not doing anything: return {...state, values: { ...payload }, pristine: true };

如果我在这里使用了错误的方法，我也很高兴被指出正确的方向.

If I am using the wrong approach here, I would also appreciate being pointed into the right direction.

推荐答案

好的，我现在找到了答案".我基本上只是按照 redux-form 网站上的这个例子 从状态初始化值.然而，它对我来说并不是开箱即用的.我必须做出两个显着的改变:

OK, so I found an 'answer' now. I basically just followed along with this example on the redux-form website Initialize values from state. However it did not work out of the box for me. I had to make two notable changes:

1. 在调用 reduxForm 时，我必须传递一个参数 enableReinitialize: true.现在在选择联系人后更新值工作正常并且表单被重置为原始状态.但是我的验证功能坏了...
2. 事实证明这是因为在某个时间点要验证的值是未定义的.为了避免这种情况，我添加了一个子句来提前退出验证函数:if (!values) {return {};}

1. In my call to reduxForm I had to pass a parameter enableReinitialize: true. Now updating values after selecting a contact worked correctly and the form was reset to pristine. But my validation function broke...
2. That turned out to be because at some point in time the values to be validated were undefined. To circumvent this I added a clause to exit early from the validation function: if (!values) {return {};}

所以现在一切都按预期进行，事件虽然改变了 nr.2 感觉有点不对...

So now everything works as expected, event though change nr. 2 feels a bit wrong...

在我的工作代码中最相关的部分(在 redux-form 连接组件中)

Below the most relevant part of my working code (in the redux-form connected component)

const getInitialValues = (currContact) => {
    if (currContact) {
        const { firstName, lastName, phone } = currContact;
        return { firstName, lastName, phone };
    }
    return { firstName: '', lastName: '', phone: ''};
}

const reduxConnectedForm = reduxForm({
    form: 'addContactForm',
    validate,
    enableReinitialize: true
})(AddContactForm);


function mapStateToProps (state) {
    return {
        initialValues: getInitialValues(state.currContact)
    };
}

const connectedForm = connect(
    mapStateToProps, 
)(reduxConnectedForm);
export default connectedForm;

这篇关于Redux-form:从状态设置表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！