Получить динамически сгенерированное значение из состояния приставки

Question

Я создал форму с двумя уровнями иерархии.

-rate-card
  -rules-within-a-rate-card

Пользователь может создать столько же rate-cards с десятью правилами или меньше.

Я использовал redux-form для создания формы, которая динамически генерирует карты, и значения, которые хранятся в этой форме:

form: {
rateCardForm: {
  syncErrors: {
    mode: 'Required',
    networkBank: 'Required',
    paymentGateway: 'Required',
    onus: 'Required',
    lowerLimit: 'Required',
    upperLimit: 'Required',
    creditCycle: 'Required',
    percent: 'Required',
    flatFee: 'Required',
    tax: 'Required'
  },
  values: {
    'rate-card-0': {
      'rule-0': {
        mode: 'WALLET',
        networkBank: 'JCB',
        paymentGateway: 'All/Remaining',
        onus: true,
        lowerOperator: '>',
        lowerLimit: '123',
        upperOperator: '<=',
        upperLimit: '123',
        creditCycle: '12311',
        percent: '231',
        flatFee: '231',
        tax: '2311'
      },
      'rule-1': {
        mode: 'Cash',
        networkBank: 'JCB',
        paymentGateway: 'ICICI',
        onus: true,
        lowerOperator: '>',
        lowerLimit: '123',
        upperOperator: '<',
        upperLimit: '44554',
        creditCycle: '43',
        percent: '23',
        flatFee: '23',
        tax: '12'
      },
      dateRange: {
        startDate: '2019-03-14T06:30:00.000Z',
        endDate: '2019-04-15T06:30:00.000Z'
      }
    },
    'rate-card-1': {
      dateRange: {
        startDate: '2019-03-10T06:30:00.000Z',
        endDate: '2019-03-22T06:30:00.000Z'
      },
      'rule-0': {
        mode: 'UPI',
        networkBank: 'MASTERCARD',
        paymentGateway: 'HDFC',
        onus: true,
        lowerOperator: '>=',
        lowerLimit: '2323',
        upperOperator: '<',
        upperLimit: '123',
        creditCycle: '123',
        percent: '123',
        flatFee: '23',
        tax: '123'
      }
    }
  },
  anyTouched: true,
  submitSucceeded: true
}

Я динамически генерирую имена для каждой карты скорости и для каждого правила (сгенерировано внутри карты скоростей).

Я хочу получить доступ к этим именам полей в самом компоненте для условной визуализации некоторых полей на основе выбора некоторых полей.

Что я пытаюсь сейчас:

1. использование formValueSelector декоратор
2. получение всего компонента ключа values в компонент

Как получить одно значение для одной ставкикарточка и только одно правило?

Answer 1

Вы можете написать свои собственные селекторы, чтобы получить нужные вам данные (селектор - это не что иное, как функция, которая принимает состояние Redux и возвращает производное значение).Например, чтобы получить идентификаторы всех тарифных карт:

function getRateCardNames(state) {
  return Object.keys(state.form.rateCardForm.values)
}

Чтобы получить имена правил для тарифной карты:

function getRuleNames(state, { rateCardName }) {
  return Object.keys(state.form.rateCardForm.values[rateCardName])
}

Чтобы получить все поля для определенного правила:

function getRuleValues(state, { rateCardName, ruleName }) {
  const rateCardValues = state.form.rateCardForm.values[rateCardName]
  return rateCardValues && rateCardValues[ruleName]
}

Затем вы можете вызывать эти селекторы из mapStateToProps.

компонента вашей формы.