Redux-form：從狀態

Question

設置表格值

我有一個叫做addContactForm的redux-form。此表單通過插件監聽我應用程序中的某些操作。爲了進一步說明，請參閱下面的代碼：

/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行動流入該減速機，我設置表單值發送給用戶選擇的聯繫人。這部分工作正常。

然而，形式現在被標記爲！質樸& &髒。因此，我的提交按鈕沒有被禁用，實際上它應該是直到用戶決定做出任何更改。

所以我的問題是：我怎麼可以更新的形式狀態，使得它被標記爲原始的？

（或無效我猜，但像一個更好的選擇，質樸的感覺）

我試圖簡單地設置在該州的對象的價值，但這個沒有做任何事情：如果我使用 return {...state, values: { ...payload }, pristine: true };

在這裏錯誤的做法，我也希望被指出正確的方向。

Answer 1

好的，所以我現在找到了'答案'。我基本上只是在redux形式的網站Initialize values from state上跟着這個例子。然而，它並不適合我。我必須做出兩個顯着的變化：

1. 在我給reduxForm打電話時，我不得不通過參數enableReinitialize: true。選擇聯繫人後，現在更新值正確工作，表單被重置爲原始狀態。但我的驗證功能打破了......
2. 原來是因爲在某個時間點，要驗證的值是未定義的。爲了規避這個問題，我添加了一個從驗證函數提前退出的子句：if (!values) {return {};}

所以現在一切按預期工作，事件雖然改變nr。 2感覺有點不對勁......

下面我工作的代碼最相關的部分（在終極版形式連接組件）

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;