Состояние обновления Redux только после полной перезагрузки страницы

Question

У меня есть форма, которая заполняется на основе сохраненной пользователем информации, и пользователь может изменить эту информацию в любое время.

Простой пример того, как это структурировано:

  componentWillMount() {
    const { user, getProfile } = this.props;

    if (user.profileId) {
      getProfile(user.profileId); // this is a redux action that fetch for user profile data updating the props.
    }
  }



  onChangeValue(e) {
    const { updateProfileField } = this.props; // this is a redux action to update a single input
    const { id, value } = e.target;

    updateProfileField(id, value);
  }

Входные данные выглядят так:

<InputField id="screenName" type="text" value={profile.screenName} onChangeValue={this.onChangeValue} placeholder="Your username" />

Компонент InputField имеет следующий вид:

class InputField extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.value,
    };

    this.onChangeValue = this.onChangeValue.bind(this);
  }

  onChangeValue(value) {
    this.props.onChangeValue(value);
  }

  render() {
    const {
      id, type, parent,
    } = this.props;

    return (
      <input
        id={id}
        parent-id={parent}
        className="form-control"
        type={type}
        name={id}
        value={this.state.value}
        onChange={this.onChangeValue}
      />
    );
  }
}

Действие Redux для обработки updateProfileField:

export function updateProfileField(field, value) {
  const payload = { field, value };
  return dispatch => dispatch({payload, type: types.UPDATE_PROFILE_FIELD});
}

Наконец, Редуктор:

const initialState = {
  data: {}, // Here are stored the profile information like `screenName`
  ...
};

export default (state = initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    ...
    case types.UPDATE_PROFILE_FIELD:

      // Here my attempts to update the input value

      return {
        ...state,
        data: { ...state.data, [payload.field]: payload.value },
      };

      // Immutability helper
      // return update(state, {
      //   data: { [payload.field]: { $set: payload.value } },
      // });

      // return Object.assign({}, state.data, {
      //   [payload.field]: payload.value,
      // });
  }
}

Дело в том, что все отлично работает, как только я загружаю страницу и начинаю вводить информацию в форму.

Если я что-то изменяю в коде, он автоматически перезагружается с помощью HMR, я вижу информацию, введенную ранее во входных данных, но если я пытаюсь обновить информацию, она больше не работает ...

Iможно видеть, что "state" обновляет только последнюю букву ввода, и пользовательский интерфейс кажется зависшим.(т.е.: входное значение: 'foo', я набираю: 'bar' результат: foob, fooa, foor ... и это не отражается в пользовательском интерфейсе).

Я думаю, что я 'Я делаю что-то здесь не так ...