Упорядоченный список полей редукс-формы - PullRequest
Новая
       5

Упорядоченный список полей редукс-формы

0 голосов
/ 02 июля 2018

Знаете ли вы, как я могу получить упорядоченный список имен полей из данной формы? API экземпляра имеет свойство с именем "fieldList", и это массив, но он не в правильном порядке. (ordered list = [firstFieldName, secondFieldName, ...] так что мне нужен список имен полей в порядке их появления в моей форме - сверху вниз)

Кроме того, действие "redux-form" '@@redux-form/REGISTER_FIELD' отправляет из правильного порядка формы, поэтому я думаю, что это не то, что мне нужно здесь ...

(Моя версия в редукционной форме: 7.3.0 )

1 Ответ

0 голосов
/ 03 июля 2018

У меня есть опыт работы с redux-form, а также я проверил его API, но не нашел документированного способа получения полей в том виде, в котором они отображаются в форме.

Однако вот как я бы это сделал:

Я создам Редуктор, который будет отслеживать поля в порядке, они зарегистрированы (отображаются в форме).

  1. У нас очень подробное действие . Как вы уже упоминали - @@redux-form/REGISTER_FIELD действие отправляет все поля в процессе регистрации в правильном порядке. Это действие имеет следующую полезную нагрузку: 

    {
  type: '@@redux-form/REGISTER_FIELD',
  meta: {
    form: 'user'
  },
  payload: {
    name: 'firstName',
    type: 'Field'
  }
}

  2. Создать редуктор . Поэтому я просто создам Редуктор, который будет прослушивать все действия @@redux-form/REGISTER_FIELD. Примерно так: 

    // The reducer will keep track of all fields in the order they are registered by a form.
// For example: `user` form has two registered fields `firstName, lastName`:
// { user: ['firstName', 'lastName'] }
const formEnhancedReducer = (state = {}, action) {
  switch (action.type) {
    case '@@redux-form/REGISTER_FIELD':
      const form  = action.meta.form
      const field = action.payload.name

      return { ...state, [form]: [...state[form], field] }
    default:
      return state
  }
}
  3. Использование . Чтобы получить упорядоченные поля с помощью формы, вы просто имеете доступ к свойству Store (state) formEnhancer с именем формы: state.formEnhanced.user.

Имейте в виду, что вы должны рассматривать некоторые случаи как @@redux-form/DESTROY, но я думаю, что это довольно простая реализация.

Я бы предпочел сохранить простоту и просто подписаться на @@redux-form/REGISTER_FIELD и просто немного изменить реализацию редуктора, чтобы предотвратить дублирование полей формы. Поэтому я просто проверим, если поле формы уже зарегистрировано и не будет заботиться о поддержке @@redux-form/DESTROY.

Надеюсь, это поможет.

...