сброс формы с использованием redux-form и immutablejs

Я пытался разобраться с редукционной формой и неизменяемыми js, и я думаю, что у меня есть большинство частей. Однако я знаю, что пропустил по крайней мере один шаг. Не все реквизиты, которые я ожидал бы передать компоненту формы, передаются ему. Например, formKey равно undefined. Я заметил это, когда пытался использовать this.props.resetForm. Функция есть, но ничего не делает. Входные данные формы остаются измененными, а pristine имеет значение false. Вот моя форма и корневой редуктор:

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
export const fields = [ 'firstName', 'lastName', 'email' ]

class ContactForm extends Component {
  render() {
    const {fields: {firstName, lastName, email}} = this.props;
    const handleSubmit = function (e) { 
        e.preventDefault()
        console.log('firstName', firstName.value)
    }

    const reset = function () {
      console.log('before', this.props)
      this.props.resetForm()
      console.log('after', this.props)
    }.bind(this)

    return (
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>First Name</label>
          <input type="text" className="form-control" placeholder="First Name" {...firstName}/>
        </div>
        <div className="form-group">
          <label>Last Name</label>
          <input type="text" className="form-control" placeholder="Last Name" {...lastName}/>
        </div>
        <div className="form-group">
          <label>Email</label>
          <input type="email" className="form-control" placeholder="Email" {...email}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
        <br/><br/>
        <button type="button" className="btn btn-primary" onClick={reset}>Reset</button>
      </form>
    );
  }
}

const ContactFormContainer = reduxForm({ 
  form: 'contact',                           
  fields,
  getFormState: (state, reduxMountPoint) => state.get(reduxMountPoint).toJS()
},
function (state, ownProps) {
    const contact = state.get('contacts').get(ownProps.contactId);
    return {
        initialValues: contact.toJS()
    }
}
)(ContactForm);

export default ContactFormContainer;

.

import Immutable, {Map, fromJS} from 'immutable'
import {reducer as formReducer} from 'redux-form';
import {combineReducers} from 'redux-immutable';
import {createStore} from 'redux';
import contacts from './contacts/reducer'

const rootReducer = combineReducers({
    form: (state = Immutable.fromJS({}), action) => Immutable.fromJS(formReducer(state.toJS(), action)),  
    contacts
});

const initialState = Map();

export default createStore(rootReducer, initialState);

person David    schedule 04.05.2016    source источник


Ответы (1)


Это старый вопрос, поэтому я полагаю, что вы уже исправили его, но если у вас все еще есть проблема, я бы рекомендовал обновить библиотеку redux-form до v6 и проверить пример с Immutable.js:

http://redux-form.com/6.0.2/examples/immutable/

В этом примере используется библиотека redux-immutablejs, но она также должна работать с redux-immutable, как указано в примере.

person Snowflake    schedule 22.09.2016