2016-11-23 2 views
1

У меня есть редукционная форма, называемая addContactForm. Эта форма прослушивает некоторые действия в моем приложении через плагин. Смотрите ниже код для иллюстрации:Редукс-форма: Значения значений формы из состояния

/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 };

Если я использую неправильный подход здесь, я также хотел бы обратить внимание на правильное направление.

ответ

2

ОК, поэтому я нашел «ответ». В основном я просто сопровождал этот пример на веб-сайте 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; 
+0

Спасибо за размещение решения для этого. – cantera

Смежные вопросы