Как использовать редукционную форму с повторным выбором

Я хочу использовать повторный выбор с избыточной формой, чтобы получить значение из избыточности. проблема в том, что я не знаю, как совместить getFormValues ​​с повторным выбором. кажется, я не могу получить доступ к состоянию в createSelector. так что я не могу найти способ использовать селектор редукционной формы при повторном выборе.

Например:

// How to access the state here?
const getFoo = createSelector(
  [getBar],
  (bar) => {
    // return something
  }
)

Селектор в редуксе работает так:

getFormValues('formName')(state);

reactjs redux redux-form reselect
person leuction    schedule 06.03.2018    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вероятно, вы захотите использовать повторный выбор с селекторами избыточной формы (именно так вы получаете текущие данные из избыточной формы).

Вы можете узнать больше о селекторах здесь....

https://redux-form.com/7.3.0/docs/api/formvalueselector.md/

с примером здесь...

https://redux-form.com/7.3.0/examples/selectingformvalues/

Затем вы должны использовать селектор Reselect с селектором Redux-form вроде этого...

const selector = formValueSelector('myForm');
const mapStateToProps = createStructuredSelector({
  firstValue: (state) => selector(state, 'firstValue')
});

Вот еще один пример использования из другой темы, связанной с Github https://github.com/erikras/redux-form/issues/1505

const formSelector = formValueSelector('myForm')
const myFieldTitle = (state) => formSelector(state, 'title')
const doSomethingWithTitleSelector = createSelector(myFieldTitle, (title) => {
    return doSomethingWithTitle(title)
})

function doSomethingWithTitle() { ... }

const Form = reduxForm({
    form: 'myForm',
})(TheComponent)

export default connect(
    state => ({
        titleWithSomethingDone: doSomethingWithTitleSelector(state)
    })
)(Form)
person Shawn Matthews    schedule 28.03.2018

arrow_upward
1
arrow_downward

Вы можете использовать getFormValues ​​следующим образом:

import { createSelector } from 'reselect';
import { getFormValues } from 'redux-form';

const selectFormValues = () => createSelector(
  (state) => state,
  (state) => getFormValues('formName')(state)
);
person Avasyu    schedule 29.06.2021

arrow_upward
0
arrow_downward

До недавнего времени попытки получить состояние выбора независимым от формы способом были действительно отстойными. Я исправил эту ситуацию, PRing компонент <FormName>, который позволяет вам получить имя включающего элемента формы, и создал библиотеку redux-form-reselect для адаптации селекторов редукционной формы. Например:

// @flow

import * as React from 'react'
import {connect} from 'react-redux'
import {
  isSubmitting,
  hasSubmitSucceeded,
  hasSubmitFailed,
  getFormError,
  FormName,
} from 'redux-form'
import {createStructuredFormSelector} from 'redux-form-reselect'
import SubmitStatus from './SubmitStatus'

type Props = {
  submitting: boolean,
  submitSucceeded: boolean,
  submitFailed: boolean,
  error: ?Error,
}

export default class SubmitStatusContainer extends React.Component<Props> {
  ConnectedSubmitStatus = connect(createStructuredFormSelector({
    // createStructuredFormSelector converts all of these selectors
    // to use the form name passed as the `form` prop to
    // ConnectedSubmitStatus.
    submitting: isSubmitting,
    submitSucceeded: hasSubmitSucceeded,
    submitFailed: hasSubmitFailed,
    error: getFormError,
  }))(SubmitStatus)

  render(): ?React.Node {
    const {ConnectedSubmitStatus} = this
    return (
      <FormName>
        {({form}) => <ConnectedSubmitStatus {...this.props} form={form} />}
      </FormName>
    )
  }
}
person Andy    schedule 03.08.2018